1.CSS概述
1.1 CSS概述
1.1.1 CSS作用
元素样式定义可以在标签中使用属性完成,也可以使用样式表定义
1.1.2 CSS定义
CSS(Cascading Style Sheets):层叠样式表/级联样式表,简称样式表;
用于定义HTML文档中元素的样式,实现了将内容与表现分离,提高代码的可重用性和可维护性。
1.1.3 CSS与HTML之间关系
HTML用于构建网页的结构,内容展示;
CSS用于构建HTML元素的样式;HTML是页面的内容组成,CSS是页面的表现
1.1.4 HTML属性与CSS样式的使用原则
W3C建议使用CSS样式取代HTML属性以实现内容和表现的分离(样式代码高度重用、提高可维护性),仅当是HTML特有的属性才使用HTML属性
1.1.5 常用属性
color 字体颜色
font-size 字体大小
background背景颜色
1.2 CSS样式表
1.2.1 CSS样式表使用方式
三种使用方式:
- 内联样式
样式定义在HTML元素的标准属性style中,CSS语法:
1)只需要将分号隔开的一个或多个属性/值对作为元素的style属性的值;
2)属性和值之间用:连接;
3)属性之间用;隔开;
Eg.1 < h1 style=“color:blue; background-color:silver;”>文本< /h1>
一般禁止使用内联样式,优先级最高(离元素最近)且不能重用 - 内部样式表
样式表规则位于文档头元素< style>元素内,在文档< head>元素内添加< style>元素,在< style>元素中添加多个样式规则,每个样式规则由选择器(决定使用该样式的元素)和样式声明(使用{}包含多个属性/值对)组成;
可以在本页面重用,但不能在其他文件调用,所以多用于学习和测试
Eg.2 < style type=“text/css”>h1{color:blue;}< /style> - 外部样式表
创建单独的样式表文件用来保存样式规则,文件后缀为.css的纯文本文件,该文件只包含样式规则(由选择器和样式声明组成);
在需要使用该样式表文件的页面上,使用< link>元素在文档< head>元素内连接需要的外部样式表文件;
< link rel=“stylesheet” type=“text/css” href=“myStyle.css” />
2. CSS语法
2.1 CSS语法规范
2.1.1 CSS语法规范
内联样式:由样式声明组成;
样式表(内部样式表或外部样式表):由多个样式规则组成,选择器和样式声明
2.1.2 CSS样式表特征
- 继承性:大多数CSS样式规则可以被子元素继承;
可以继承的属性很少,只有颜色,文字,字体间距行高对齐方式,和列表的样式可以继承;
所有元素可继承:visibility和cursor;
内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction;
终端块状元素可继承:text-indent和text-align;
列表元素可继承:list-style、list-style-type、list-style-position、list-style-image; - 层叠性:可以定义多个样式,不冲突时多个样式表中的样式可层叠为一个;
- 优先级:样式定义冲突会按照不同样式规则的优先级来应用样式
2.1.3 样式优先级
浏览器默认样式 < 外部样式表或内部样式表(就近原则) < 内联样式
如果重复定义相同的样式,以最后一次定义为准
2.1.4 !important规则
!important可以调整样式规则的优先级;
直接将!important添加在样式规则之后,中间用空格隔开:选择器{属性:属性值 !important; }
2.2 CSS选择器
2.2.1 通用选择器
星号*,匹配所有标签设置默认样式,效率极低,基本不使用;
除了内外边距清零:*{margin:0; padding:0;}
*
{
font-size:9pt;
}
2.2.2 元素选择器
html文档的元素,比如< p>、< h1>等
h1
{
font-size:9pt;
}
2.2.3 类选择器
语法:.className {color: red; }
1)类名称不能以数字开头;由字母、数字、字符-和_组成
2)在样式表中声明样式类,在html文档中将元素的class属性的值设置为样式类的名称;
3)可以将多个类选择器应用于同一个元素(多类选择器),各个词之间用空格分隔;
.important{}
.bgc{}
<h1 class="important"></h1>
<p class="important bgc"></p>
结合类选择器和元素选择器以实现对某种元素不同样式的细分控制(分类选择器)
语法:元素选择器.className{}
将样式规则与附带class属性的某种元素匹配:元素class属性的值为分类选择器中指定的样式类名
指向更精确,提升样式优先级
//只有p元素使用important样式
p.important{}
<h1 class="important"></h1>
<p class="important"></p>
2.2.4 id选择器
id选择器以独立于文档元素的方式指定样式,仅作用于id属性的值。
语法:选择器前面需要#号;选择器本身为文档某个元素id属性值。
在样式表中定义#id_value{};在HTML文档中将元素id属性的值设置为选择器的名称
#id_value{}
<h1 id="id_value"></h1>
2.2.5 群组选择器
选择器声明以逗号隔开的选择器列表,用于将相同的规则作用于多个元素
h2, p.important
{
color: green;
}
2.2.6 后代选择器
依据元素在其位置的上下文关系定义样式,用于选择作为某元素后代的元素,用空格分隔
//只有<h1>元素中的<span>元素中的文本才能使用该样式
h1 span
{
color:red;
}
2.2.7 子代选择器
子代选择器要求选择器之间只能存在父子关系,不能任意选择后代元素,使用符号>作为子结合符
div>span {
}
//只有<div>的子元素<span>元素中的文本使用该样式
2.2.8 伪类选择器
伪类用于向某些选择器添加特殊的效果,使用冒号:作为结合符,左边是其他选择器,右边是伪类;
- 链接伪类
:link,未访问的链接
:visited,访问过的链接 - 动态伪类(用于呈现用户操作)
:hover,鼠标悬停在HTML元素
:active,HTML元素被激活
:focus,HTML、元素获取焦点 - 目标伪类
- 元素状态伪类
- 结构伪类
- 否定伪类
2.2.9 选择器优先级
内联样式,如: style="…",权值为1000。
ID选择器,如:#content,权值为0100。
类,伪类、属性选择器,如.content,权值为0010。
类型选择器、伪元素选择器,如div p,权值为0001。
通配符、子选择器、相邻选择器等。如 > +,权值为0000。
继承的样式没有权值*
选择器类型 | 权值 |
---|---|
元素选择器 | 0,0,0,1 |
类选择器 | 0,0,1,0 |
伪类选择器 | 0,0,1,0 |
ID选择器 | 0,1,0,0 |
内联样式 | 1,0,0,0 |
选择器的权值加到一起,数值大的优先,权值相同则后定义的优先;
选择器的权值计算不会超过其权值的最大数量级;
内联样式不能加!important
3.尺寸与边框
3.1 CSS单位
3.1.1 尺寸单位
in:英寸(1in=2.54cm)
cm:厘米
mm:毫米
pt:磅(1/72英寸)
px:像素(计算机屏幕上一个点)
em:1em等于当前字体尺寸,2em等于当前字体尺寸的两倍,继承父级元素的字体大小;
%:相对于父元素百分比;
rem:与em类似,相对于根元素(body/html)设置字体尺寸的倍数
3.1.2 颜色单位
表示颜色的英文单词,red
rgb(r,g,b):RGB值,rgb(255,255,255)代表白色
#rrggbb:十六进制数,#ff0000
#rgb:简写十六进制数,#f00
rgba(r,g,b,alpha) 透明值0~1
rgb(r%,g%,b%):RGB百分比值,表现形式使用极少
3.2 尺寸属性
3.2.1 尺寸
用于设置元素的宽度和高度,取值一般为像素或百分比。
宽度属性:
width、max-width、min-width
高度属性:
height、max-height、min-height
3.2.2 溢出
使用尺寸属性控制框的大小,如果内容所需空间大于框本身会导致内容溢出,默认垂直溢出;
overflow:指示内容溢出元素框的处理方式
visible默认值、hidden、scroll(横向纵向一直显示滚动条)、auto
overflow-x
overflow-y
3.2.3 设置尺寸属性
可以设置尺寸属性的HTML元素:
- 块级对象
p、div、h#、ul,ol,li,dl,dt,dd等 - 存在width、height属性的行内元素
img、table - 行内块元素
3.3 边框属性
3.3.1 边框
border:width style color;
单属性设置:必须有style属性才可以正常显示
border-width/style/color;
单边定义:
border-left/right/top/bottom-width/style/color;
border-left/right/top/bottom: width style color;
边框样式style 实线solid dotted圆点虚线 dashed 短线虚线 double双实线
边框颜色可设置为transport,创建有宽度的不可见边框
取消边框:border:none/0;
3.3.2 边框倒角
border-radius属性:顺时针设置四个倒角,取值为绝对值或百分比;50%表示圆
单独定义:
border-top-left-radius;
border-top-right-radius;
border-bottom-left-radius;
border-bottom-right-radius;
3.3.3 边框阴影
box-shadow:向方框添加多个阴影,取值为多属性值的列表
h-shadow:必需,水平阴影的位置
v-shadow:必需,垂直阴影的位置
blur:阴影模糊距离
spread:阴影尺寸
color:阴影颜色
inset:将外部阴影改为内部阴影
3.3.4 轮廓
轮廓是边框边缘的外围,用于突出元素
outline:width style color ;
outline: none/0;
//轮廓宽度、轮廓样式、轮廓颜色