css的引入方式:
css三种样式表:行内样式,内部样式,外部样式
行内样式(内嵌样式表):在标签内部写style属性,适合修改简单样式
<body>
<div style="text-decoration: underline;">宁可枝头抱香死,不曾吹落北风中</div>
</body>
内部样式:写到html页面内部,将所有css代码抽取出来,单独放到<style>标签中,但并未完全分离
外部样式:样式单独写进css文件中,后把css文件引入HTML页面中使用
先建立一个css文件,再用link标签调用
<link rel="stylesheet" href="css文件路径">
Emmet语法
快速生成html语法结构
输入标签名按tab建
生成多个标签:div*3 父子级关系:ul>li 兄弟关系:div+p
带有类名或id名:.demo或#two按tab键 有顺序的div类名,用自增符号$
快速生成css样式语法结构
css复合选择器
两个或多个基础选择器的不同组合
后代选择器:可选父元素里的子元素,选择元素1里的所有元素2
元素1 元素2 {样式声明} 元素2是元素1的后代,元素1和元素2用空格隔开,元素1和 元素2是任意的基础选择器
子选择器:只选亲儿子元素
元素1 > 元素2 {样式声明}
并集选择器:可选择多组标签,定义成相同的样式,用于集体声明
元素1 , 元素2 {样式声明} 任何形式选择器都作为并集选择器的一部分
伪类选择器:向某些选择器添加特殊效果,
链接伪类:按以下顺序声明,不能颠倒,为a单独制定样式
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标位于其上的链接
a:active 选择活动链接
focus伪类选择器:选取获得光标的表单元素
input:focus{
background-color:yellow;
}
css元素显示模式
块元素:
行内元素:
行内块元素:
元素显示模式的转换:一个模式的元素需要另外一个模式的特性
转换为块元素:display:block;
转换为行内元素:display:inline;
转换为行内块元素:display:inline-block
CSS背景
背景颜色:background-color,默认值是transparent透明
background-color:颜色;
既有背景图片又有背景颜色时,背景图片会压住背景颜色
背景颜色半透明:
background:rgba(0,0,0.3) 最后一个参数是透明度,取值范围0-1
背景图片:background-image,默认值是none
background-image:none|url(url);
背景图片位置:background-position,
参数是方位名词
background-position:x y; 如果是方位名词和顺序没有关系,如果只定义了一个方位名词默认居中显示
参数值 | 说明 |
---|---|
length | 百分数|由浮点数字和单位标识符组成的长度值 |
position | top | center | botton | left | center | right 方位名词 |
精确单位:
background-position:x y; 顺序不能改变,严格按照x,y的顺序,如果只定义了一个,另外一个默认居中
混合单位:可以是方位名词和精确单位的组合,第一个值一定是x坐标,第二个值一定是y坐标
背景平铺:background-repeat,默认值情况平铺
background-repeat:pepeat|no-repeat|repeat-x|repeat-y
背景图像固定(背景附着):background-attachment,后期可制作视差滚动的效果
background-attachment:scroll | fixed
scroll:背景图像随对象内容滚动 fixed:背景图像固定
背景的复合写法:属性间用空格隔开,顺序无特殊要求,一般按照以下顺序
background:背景颜色,背景图片地址,背景平铺,背景图像滚动,背景图片位置
CSS的三大特性
1.层叠性:主要解决样式冲突,采用就近原则,离结构式近的被执行
2.继承性:子标签会继承父标签的与文字相关的某些样式
行高的继承可以跟单位也可以不跟
body{
font:12px/1.5 Microsoft YaHei 1.5是1.5倍
}
3.优先级:同一元素指定多个选择器产生优先级
选择器相同执行兴层叠性,选择器不同根据选择器权重执行,权重会叠加,但不会进位