摘要:编写静态页面时使用常见的元素样式等使用语义化的元素样式新增了很多语义化标签若与元素样式,这两个标签都是无语义化的表示十与标签是块级元素独占一行默认的宽度为父级元素宽度的默认的高度为作用用于布局元素是内联元素
一、input标签
1.实现按钮效果
-与表单相关的按钮效果
-
2.
二、基本选择器
1.选择器的优先级别 通配符选择器 < 元素选择器 < 类选择器/属性选择器 < ID选择器 2.元素选择器 - 定位当前页面的指定标签名 ID选择器 - 定位当前页面中指定ID属性值的标签(只能匹配一个标签,无法重复使用) 类(class)选择器 - 定位当前页面中指定class属性值的标签 通配符选择器 - 匹配当前页面所有内容 属性选择器 - [attr] - 匹配含有指定属性(属性名为attr)的标签(元素)。 3.优先级别:内联样式 > 外联样式。 4.!important 设置当前内容的选择器的级别为最高; 注意 - 打乱CSS选择器的默认优先级别顺序; 建议 - 尽量不要使用.
三、关系选择器
1.祖先与后代的关系 - 后代选择器 A B 2.父级与子级的关系 - 子选择器 A>B 3.相邻兄弟选择器 - 定位指定元素的下一个兄弟元素 A+B 4.后面兄弟选择器 - 定位指定元素的后面所有兄弟元素 A~B
四、组合选择器
1.组合选择器 - 选择器之间使用逗号隔开,之间为并集如:
h1, h2, h3 {font-size: 18px;}
其中:标题一
标题二
标题三
2.组合选择器 - 选择器之间没有任何分隔,之间为交集
1) p#p1 { color: lightcoral; } 都选中
这是一个段落内容.
这是一个段落内容.
2) p.mini { font-size: 12px; } 只选中p元素。
标题二
这是一个段落内容.
五、颜色值
1.使用英文单词描述颜色
-常用的颜色使用比较方便
-问题
-比较特殊的颜色,表示比较麻烦
-不同浏览器对单词描述的颜色存在色差
-建议 - 开发中,尽量不要使用
2.颜色基本由三原色(红、绿、蓝)组成
-rgb(红, 绿, 蓝)
-每个颜色值的范围 - 0 ~ 255
- #红绿蓝
-每个颜色使用两位表示
-值的范围 00 ~ ff
-举例
-#000000
六、伪类
伪类 - 设定指定状态下的样式 标签链接 - 默认样式 未被访问的样式 - 字体颜色为蓝色 鼠标悬浮在链接元素时 - 鼠标样式变化 当鼠标点击链接元素时 - 字体颜色为红色 已被访问的样式 - 字体颜色变化 :hover :active :visited :link :focus
七、伪元素
::before ::after等
八、块级元素与内联元素
1.块级元素
独占一行(自动换行) - 所有的块级元素都是垂直排列的
| 九、语义化 所谓的语义化 -每一个指定的HTML元素, 具有明确的指定含义。 HTML编写静态页面时 1. 使用常见的HTML元素 + CSS样式 - |