目录: ♥一.css引入方式:
♥二.基础选择器:
♥三. 背景图片相关属性
♥四.元素的显示模式
♥五布局:标签嵌套规范注意点:
♥六.css的三大特性
♥一.css引入方式:
1.内嵌式--html与css写在同一个页面内-
2.外联式---link引入--开发项目常用
3.行内式--直接写在标签内
♥二.基础选择器:
1.标签选择器-------------标签名
2.类选择器-----------------.类名
3.id选择器-----------------#id属性值
4.通配符选择器-----------*
5.后代选择器--------------选择器1 选择器2---空格隔开----找后代(子子孙孙有一个算一个)
6.子代选择器--------------选择器1>选择器2---->连接 --------只找儿子
7.并集选择器--------------选择器,选择器2----,连接---------都有的
8.交集选择器--------------选择器1选择器2-----紧挨着--------两个都有的相同的部分(我常忽略会错)
9.伪类选择器--------------选择器:hover {}--鼠标悬停在元素的状态
♥三. 背景图片相关属性
1.背景颜色:background-color: #fff;so
2.背景图片: background-image: url();
3.背景平铺: background-repeat: no-repeat;
4.背景位置: background-position:;
背景位置属性值:1.方位词--------X水平方向{left ceter right}
Y垂直方向{top center bottom}
2.数字+px:坐标-----------{原点(0,0)--盒子左上角度
X轴---水平向右
Y轴----垂直向下}
背景属性连写——空格隔开&原则属性不分先
——推荐顺序:background: color image repeat position
♥四.元素的显示模式------布局必用哦推--荐指数⭐⭐⭐⭐⭐
1.块级元素-------代表标签:div p h系列-----ul li &dl dt dd &form head nav footer......
2.行内元素-------代表标签:a span --------b u i s &strong ins em del.......
3.行内块元素---代表标签:input textarea button select.....
显示模式特性:推荐指数⭐⭐⭐⭐⭐
块级元素: ------⭐1.独占一行
-------⭐2.可以设置宽高-----可设置背景色或者边框会看到元素
--------⭐3.宽度默认是父元素的宽度,高度默认由内容撑开
行内元素: ---------1.一行可以显示多个
---------2.不可以设置宽高
---------3.宽度和高度默认由内容撑开
行内块元素 ----------1.一行可以显示多个
-----------2.可以设置宽高
{三种显示模式可以相互准换,布局时常用,且应用十分广泛}
特殊:img---------具备行内块显示特点,调试里显示是行内元素
----------不设置宽高默认图片原尺寸显示,不设置宽高也可以看见
♥五布局:标签嵌套规范注意点:1.块级嵌套:文本 行内元素 行内块元素
但是:p不能嵌套:div p h
2.a可以嵌套任意元素
但是:a不能嵌套a
♥六.css的三大特性---且听下回分析→❤❤❤