1、CSS选择器写法
CSS规则 = 选择器 + 声明块 ### 选择器 选择器:选中元素 1. ID选择器:选中的是对应id值的元素 2. 元素选择器 3. 类选择器 ### 声明块 出现在大括号中
声明块中包含很多声明(属性),每一个声明(属性)表达了某一方面的样式。
2、CSS书写位置
1. 内部样式表 书写在style元素中 2. 内联样式表,元素样式表 直接书写在元素的style属性中 3. 外部样式表[推荐] 将样式书写到独立的css文件中。 1). 外部样式可以解决多页面样式重复的问题 2). 有利于浏览器缓存,从而提高页面响应速度 3). 有利于代码分离(HTML和CSS),更容易阅读和维护
3、常见样式声明
# 常见样式声明 1. color 元素内部的文字颜色 **预设值**:定义好的单词 **三原色,色值**:光学三原色(红、绿、蓝),每个颜色可以使用0-255之间的数字来表达,色值。 ``` rgb表示法: rgb(0, 255, 0) hex(16进制)表示法: #红绿蓝 ``` 淘宝红:#ff4400, #f40 黑色:#000000,#000 白色:#ffffff, #fff 红:#ff0000, #f00 绿:#00ff00, #0f0 蓝:#0000ff, #00f 紫:#f0f 青:#0ff 黄:#ff0 灰色:#ccc 2. background-color 元素背景颜色 3. font-size 元素内部文字的尺寸大小 1)px:像素,绝对单位,简单的理解为文字的高度占多少个像素 2)em:相对单位,相对于父元素的字体大小 每个元素必须有字体大小,如果没有声明,则直接使用父元素的字体大小,如果没有父元素(html),则使用基准字号。 > user agent,UA,用户代理(浏览器) 4. font-weight 文字粗细程度,可以取值数字,可以取值为预设值 > strong,默认加粗。 5. font-family 文字类型 必须用户计算机中存在的字体才会有效。 使用多个字体,以匹配不同环境 sans-serif,非衬线字体 6. font-style 字体样式,通常用它设置斜体 > i元素,em元素,默认样式,是倾斜字体; 实际使用中,通常用它表示一个图标(icon) 7. text-decoration 文本修饰,给文本加线。 > a元素 > del元素:错误的内容 > s元素:过期的内容 8. text-indent 首行文本缩进 9. line-height 每行文本的高度,该值越大,每行文本的距离越大。 设置行高为容器的高度,可以让单行文本垂直居中 行高可以设置为纯数字,表示相对于当前元素的字体大小 10. width 宽度 11. height 高度 12. letter-space 文字间隙 13. text-align 元素内部文字的水平排列方式
4、选择器类型
## 元素选择器 元素选择器根据元素名称来选择 HTML 元素。 p { text-align: center; color: red; } ## id 选择器 id 选择器使用 HTML 元素的 id 属性来选择特定元素。 元素的 id 在页面中是唯一的,因此 id 选择器用于选择一个唯一的元素! 要选择具有特定 id 的元素,请写一个井号(#),后跟该元素的 id。 这条 CSS 规则将应用于 id="para1" 的 HTML 元素: #para1 { text-align: center; color: red; } ## 类选择器 类选择器选择有特定 class 属性的 HTML 元素。 如需选择拥有特定 class 的元素,请写一个句点(.)字符,后面跟类名。 所有带有 class="center" 的 HTML 元素将为红色且居中对齐: .center { text-align: center; color: red; } ## 通用选择器 通用选择器(*)选择页面上的所有的 HTML 元素。 实例 下面的 CSS 规则会影响页面上的每个 HTML 元素: * { text-align: center; color: blue; }
## CSS 分组选择器 分组选择器选取所有具有相同样式定义的 HTML 元素。 以下CSS 代码(h1、h2 和 p 元素具有相同的样式定义): h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; } 最好对选择器进行分组,以最大程度地缩减代码。 如需对选择器进行分组,请用逗号来分隔每个选择器。 可以对代码中的选择器进行分组: h1, h2, p { text-align: center; color: red; }
## 属性选择器:https://www.w3school.com.cn/css/css_attribute_selectors.asp
## 伪类选择器:https://www.w3school.com.cn/css/css_pseudo_classes.asp
## 伪元素选择器:https://www.w3school.com.cn/css/css_pseudo_elements.asp