温故而知新——CSS篇

96
jia林
2017.11.15 11:43* 字数 1870

什么是CSS

  • CSS 层叠样式表 (Cascading Style Sheets)
  • 用于定义HTML内容在浏览器内的显示样式

CSS发展

  • 1996 w3c css1
  • 1998 w3c css2
  • 现在 w3c css3

为什么学习CSS

  • CSS简化HTML相关标签,网页体积小,下载快
  • 解决内容与表现分离的问题
  • 更好的维护网页,提高工作效率

CSS样式规则

  • 由2部分构成:选择器、声明


    image.png

CSS选择器

  • 全局选择器
  • 标签选择器
  • ID选择器
  • 类选择器
  • 群组选择器
  • 后代选择器

CSS引用

  • 内部样式
<style typs='text/css'>
    css样式
</style>
  • 行内样式
<div style='css样式'></div>
  • 外链样式
<link rel="stylesheet" type="text/css" href="css文件">
  • 使用@import导入,由于兼容和加载问题,不建议使用

CSS注释

  • CSS注释:/ * 注释语句 * /

CSS使用方法优先级

  • 行内样式>内部样式>外部样式
  1. 链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
  2. 最后定义的优先级最高(就近原则)

选择器权值

  • 行内样式:权值为1000
  • ID选择器:权值为100
  • 类选择器和伪类:权值为10
  • 标签选择器:权值为1
  • 通配符选择器:权值为0

权值规则

  • 统计不同选择器的个数
  • 每类选择器的个数乘以相应权值
  • 把所有的值相加得出选择器的权值

!important规则

  • !important声明高

链接伪类

伪类 说明
:link 未访问的链接
:visited 已访问的链接
:hover 鼠标悬停状态
:active 激活的链接
  • 链接伪类的顺序

:Link > :Visited > :Hover > :Active

  1. a:hover 必须置于 a:link 和 a:visited 之后,才有效
  2. a:active 必须置于 a:hover 之后,才有效
  3. 伪类名称对大小写不敏感

CSS继承和层叠

  • 从父元素那继承部分CSS属性
  • 可以定义多个样式
  • 不冲突时,多个样式可层叠为一个
  • 冲突时,按不同样式规则优先级来应用样式

CSS样式命名规则

  • 采用英文字母、数字以及“-”和“_”命名
  • 以小写字母开头,不能以数字和“-”、“_”开头
  • 命名形式:单字,连字符,下划线和驼峰
  • 使用有意义命名

CSS字体和文本样式

1、 字体:font-family

定义元素内文字以什么字体来显示
语法:
font-family:[字体1][,字体2][,…]
说明:
• 含空格字体名和中文,用英文引号(“ )括起
• 多个字体,用英文逗号“,”隔开
• 引号嵌套,外使用双引号,内使用单引号

2、文字大小:font-size

font-size: 绝对单位|相对单位
• px 像素
• em/%

3、文字颜色:color

定义元素内文字颜色
语法:
color: 颜色名|十六进制|RGB

4、文字粗细:font-weight

为元素内文字设置粗细
语法:
font-weight: normal | bold | bolder | lighter | 100~900
说明:
默认值:normal
400 等同于 normal,而 700 等同于 bold

5、 文字样式:font-style

为元素内文字设置样式
语法:
font-style: normal|italic|oblique

6、字体变形:font-variant

设置元素中文本为小型大写字母
语法:
font-variant: normal | small-caps

7、text-align

设置元素内文本的水平对齐方式
语法:
text-align: left | right | center | justify
注:该属性对块级元素设置有效

8、line-height

设置元素中文本行高
语法:
line-height: 长度值 | 百分比
说明:一行文字的高度。
行高指文本行的基线间的距离。

image.png

image.png

9、vertical-align

设置元素内容的垂直方式
语法:
vertical-align: baseline | sub | super | top | text-top
middle | bottom | text-bottom
长度 | 百分比

image.png

image.png

CSS背景样式

1、 background-color 设置元素的背景颜色。

设置元素的背景颜色
background-color: 颜色| transparent
说明
• transparent是全透明黑色(black)的速记法,类似rgba(0,0,0,0)这样的值。
• 颜色值(颜色名|RGB|十六进制|)
• 背景区包括内容、内边距(padding)和边框、不包含外边距(margin)

2、 background-image 把图像设置为背景。

background-image : URL| none
设置元素的背景图片
说明
• url地址可以是相对地址也可以是绝对地址
• 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。
• 默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。

3、 background-position 设置背景图像的起始位置。

设置元素的背景图片的起始位置
background-position : 百分比 |值
top |right | bottom | left | center

4、background-attachment 背景图像是否固定或者随着页面的其余部分滚动。

background-attachment: scroll |fixed
设置元素的背景图片的显示方式
说明:
scroll :默认值,背景图片随滚动条滚动
fixed :当页面的其余部分滚动时,背景图片不会移动

5、 background-repeat 设置背景图像是否重复及如何重复。

repeat :默认值,背景图片水平方向和垂直方向重复
repeat-x:背景图片水平方向重复
repeat-y : 背景图片垂直方向重复
no-repeat : 背景图片不重复

7、 background 简写属性,作用是将背景属性设置在一个声明中。

background:[background-color] [background-image]
[background-repeat]
[background-attachment]
[background-position] []
说明:
各值之间用空格分割 ,不分先后顺序

列表样式

1、list-style-type 设置列表项标志的类型。

  • 无序列表
说明
none 无标记
disc 实心的圆点
circle 空心的圆点
square 实心的方块
  • 有须列表
说明
decimal 从1开始的整数
lower-roman 小写罗马数字
upper-roman 大写罗马数字
lower-alpha 小写英文字母
upper-alpha 大写英文字母

2、 list-style-image 将图像设置为列表项标志。

list-style-image:URL|none

• list-style-position 设置列表中列表项标志的位置。

list-style-position:inside|outside
inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐;
outside:默认值,列表项目标记放置在文本以外,且环绕文本不根据标记对齐

• list-style 简写属性,用于把所有列表的属性设置于一个声明中。

说明:list-style-image会覆盖list-style-type的设置

边框属性

  • border-width 边框宽度
  • border-color 边框颜色
  • border-style 边框样式
  • 边框缩写

border:[宽度] | [样式] | [颜色]
不同放向:
border-top:[宽度] | [样式] | [颜色];
border-left:[宽度] | [样式] | [颜色];
border-bottom:[宽度] | [样式] | [颜色];
border-right:[宽度] | [样式] | [颜色];

内边距属性(设置元素的内容与边框之间的间距)

  • padding-top:[长度值] | [百分比]
  • padding-right:[长度值] | [百分比]
  • padding-bottom:[长度值] | [百分比]
  • padding-left:[长度值] | [百分比]
  • padding(简写): top right bottom left;

外间距属性(设置元素与元素之间的间距)

  • margin-top:[长度值] | [百分比]
  • margin-right:[长度值] | [百分比]
  • margin-bottom:[长度值] | [百分比]
    -margin-left:[长度值] | [百分比]
  • margin(简写): top right bottom left;

注:文章内容借鉴慕课网

发布的文章
Web note ad 1