网页设计之第二节CSS笔记-1
CSS简介这节的目录
- CSS简介
- 1.1 HTML和CSS的区别
- 1.2 CSS语法
- CSS基础选择器
- 2.1选择器的作用
- 2.2 选择器的分类
- 2.2.1 基础选择器
- 标签选择器
- 类选择器
- 类选择器-多类名
- id选择器
- 通配符选择器
- 总结
- CSS字体属性
- 字体系列
- 3.1 font-family
- 3.2 font-size
- 3.3 font-weight
- 3.4 font-style
- 3.5 font 复合属性
- 总结
- CSS文本属性
- 外观系列
- 4.1 color
- 4.2 text-align 水平对齐方式
- 4.3 text-decoration 文本装饰
- 4.4 text-indent 首行缩进
- 4.5 line-height 行间距
- 4.6 white-space 空白符处理
- 4.7 letter-spacing 字间距
- 4.8 word-spacing 单词间距
- 4.9 text-transform 文本转换
- 总结
- CSS引入方式
- 5.1 行内样式表
- 5.2 内嵌式样式表
- 5.3 链入式样式表
- 5.4 导入式样式表
- Emmett语法
- 6.1 快速生成HTML结构语法
- 6.2 快速生成CSS结构语法
- CSS的高级特性
- 7.1 CSS复合选择器
- 7.1.1 标签指定式
- 7.1.2 后代选择器(重要)
- 7.1.4 子选择器(重要)
- 7.1.3 并集选择器(重要)
- 7.1.4 伪类选择器
- 链接伪类选择器
- :focus伪类选择器
- 总结
- 7.2 CSS的元素显示模式
- 7.2.1 块元素
- 7.2.2 行内元素
- 7.2.3 行内块元素
- 总结
- 7.2.4 元素显示模式的转换
- 案列：小米侧边栏
- 7.3 CSS的背景
- 7.3.1 background-color
- 7.3.2 background-image
- 7.3.3 background-repeat
- 7.3.4 background-position
- 7.3.5 background-attachment
- 7.3.6 background
- 背景色半透明
- 总结
- 案例：五彩缤纷导航
- 7.4 CSS的三大特性
- 7.4.1 重叠性
- 7.4.2 继承性
- 行高的继承
- 7.4.3 优先级
CSS简介
CSS是层叠样式表的简称，有时我们也会称为CSS样式表或级联样式表。
1.1 HTML和CSS的区别
CSS可以美化HTML，让HTML更漂亮，让页面布局更简单。
总结：
- HTML主要是做结构，显示元素内容
- CSS美化HTML，布局网页
- CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构(HTML)与样式(CSS)相分离。
1.2 CSS语法
样式规则
CSS规则由两个主要的部分构成：选择器以及一条或多条声明。
选择器{属性1：属性值1；属性2：属性值2；}
- 选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
- 属性和属性值以"键值对"的形式出现
- 属性是对指定的对象设置的样式设置的样式属性，例如字体大小、文本颜色等
- 属性和属性值之间用英文 “:” 分开
- 多个"键值对"之间用英文 “;” 进行区分
CSS基础选择器
2.1选择器的作用
选择器就是根据 不同需求把不同的标签选出来 这就是选择器的作用.
CSS做了两件事:
- 找到了标签,选择器 (选对人)
- 设置这些标签的样式,比如颜色为红色 (做对事)
2.2 选择器的分类
2.2.1 基础选择器
基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器
标签选择器
类选择器
样式点定义 结构类(class)调用 一个或多个 开发最常用
类选择器-多类名
多类名使用方式：
- 在class属性中写多个类名
- 多个类名中间必须用空格分开
- 这个标签就可以分别具有这些类名的样式
使用场景：
- 可以把一些标签元素相同的样式(共同的部分)放到一个类里面
- 这些标签都可以调用这个公用的类，然后再调用总结独有的类
- 从而节省CSS代码，统一修改非常方便
id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式
HTML 元素以id属性来设置id选择器，CSS 中id 选择器以"#"定义
样式#定义 结构id调用 只能调用一次 别人切勿使用
通配符选择器
- *是全部的意思
- 不需要调用
总结
CSS字体属性
字体系列
3.1 font-family
CSS 使用 font-family 属性定义文本的字体系列
- 各种字体之间必须使用英文状态下的逗号隔开
- 一般情况下，如果有空格隔开的多个单词组成的字体，加引号
- 尽量使用系统默认自带字体，保证再任何用户的浏览器中都能正确显示
- 在有英文字体和中文字体时，规定中文字体写在英文字体的后面
3.2 font-size
CSS 使用 font-size 属性定义文本的大小
- px(像素)大小是我们网页的最常用的单位
- 可以给body指定整个页面文字大小
- 标题标签比较特殊，需要单独指定大小
3.3 font-weight
CSS 使用 font-weight 属性定义文本字体的粗细
font-weight 除了 bold 还有以下属性：
| 属性值 | 作用 |
|---|---|
| normal(常用给标题不加粗) | 默认值，定义标准的字符 |
| bold | 定义粗体字符 |
| bolder | 定义更粗的字符 |
| lighter | 定义更细的字符 |
| 100-900(100的整数倍) | 400=normal，700=bold |
3.4 font-style
CSS 使用 font-style 属性定义文本的风格
| 属性值 | 作用 |
|---|---|
| normal | 默认值，浏览器会显示标准默认的字体样式 |
| italic(常用) | 显示倾斜字体 |
| oblique | 显示倾斜字体 |
3.5 font 复合属性
- 书写有顺序，属性与属性之间空格隔开
- size 和 family 不能不写，否则font属性将不起作用
总结
CSS文本属性
外观系列
4.1 color
| 表示方式 | 属性值 |
|---|---|
| 预定义的颜色值 | red，green blue |
| 十六进制 | #FF6600 |
| RGB代码 | rgb(255,0,0)或rgb(100%,100%,100%) |
4.2 text-align 水平对齐方式
text-align 属性用于设置元素内文本内容的 水平对齐方式
| 属性值 | 解释 |
|---|---|
| left | 左对齐(默认值) |
| right | 右对齐 |
| center | 居中对齐 |
4.3 text-decoration 文本装饰
| 属性值 | 描述 |
|---|---|
| none | 默认值。没有装饰线 |
| underline | 下划线 。标签a自带下划线，可以设置取消 |
| overline | 上划线 |
| line-through | 删除线 |
4.4 text-indent 首行缩进
通过设置该属性，所有元素的第一行都可以缩进一个 给定的长度 ，甚至该长度可以为负值
em 是一个相对单位，就是当前元素(font-size)1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。
4.5 line-height 行间距
4.6 white-space 空白符处理
| 属性值 | 解释 |
|---|---|
| normal | 默认值，文本中的空格、空行无效 |
| pre | 预格式化，按文档的书写格式保留空格、空行原样显示 |
| nowrap | 强制文本不能换行，除非遇到 br ,内容超出浏览器页面则会自动出现滚动条 |
4.7 letter-spacing 字间距
letter-spacing 用来定义字符与字符之间的空白。
- 其属性值可以为不同单位的数值(常用px)
- 允许使用负值
- 默认为normal
4.8 word-spacing 单词间距
word-spacing 用来定义英文单词之间的间距，对中文字符无效
- 其属性值可以为不同单位的数值(常用px)
- 允许使用负值
- 默认为normal
注意：
相同：word-spacing 和 letter-spacing 均可以对英文进行设置。
不同：letter-spacing定义的为字母之间的间距，而word-spacing 定义的为英文单词之间的间距
4.9 text-transform 文本转换
用来控制英文字符的大小写
| 属性值 | 作用 |
|---|---|
| none | 默认值，不转换 |
| capitalized | 首字母大写 |
| uppercase | 全部字符转换为大写 |
| lowercase | 全部字符转换为小写 |
总结
CSS引入方式
5.1 行内样式表
5.2 内嵌式样式表
5.3 链入式样式表
5.4 导入式样式表
Emmett语法
6.1 快速生成HTML结构语法
- 生成标签 直接输入标签名按tab键即可 比如 div 然后tab键 就可以生成一对div标签
- 生成多个相同标签 加上 * 即可 比如 div*3就可以生成3个div
- 如果有父子级关系的标签 用>即可 比如 ul>li 就可以
- 如果有兄弟关系的标签 用+即可 比如 div+p
- 如果生成带有类名或者id名字的，直接写.demo或者#two 按tab键就可以了
- 如果生成的div类名是有顺序的，可以用自增符号$
- 如果想要在生成的标签内部写内容可以用{}表示
6.2 快速生成CSS结构语法
第一个字母简写 ，按tab键就可…
CSS的高级特性
7.1 CSS复合选择器
7.1.1 标签指定式
由两个选择器构成，标签和class/id，之间不能有空格
7.1.2 后代选择器(重要)
外层写前面，内层写后面，中间空格隔开，不限于两个元素
7.1.4 子选择器(重要)
只能选择作为某元素的最近一级子元素，可以理解为长子选择器。
7.1.3 并集选择器(重要)
有多个标记具有相同的属性，用逗号隔开，进行集体说明且任何选择器都可以作为并集选择器的一部分
7.1.4 伪类选择器
用于向某些选择器添加特殊的效果
链接伪类选择器
| 属性 | 作用 |
|---|---|
| a:link | 选择所有未被访问的链接 |
| a:visited | 选择所有已被访问的链接 |
| a:hover | 选择鼠标指针位于其上的链接 |
| a:active | 选择活动链接(鼠标按下未弹起的链接) |
一点细节
:focus伪类选择器
用于选取获得焦点的表单元素
焦点就是鼠标的光标
下面示例意思是光标停在哪个表单里面，哪个表单的背景色为黄色。
总结
7.2 CSS的元素显示模式
元素显示模式就是元素(标签)以什么方式进行显示
HTML元素一般分为块元素和行内元素两种类型
7.2.1 块元素
块元素的特点：
- 比较霸道，自己独占一行
- 高度、宽度、外边距以及内边距都可以控制
- 宽度默认是容器(父级宽度)的100%
- 是一个容器及盒子，里面可以放行内或者块级元素
注意： 文字类的元素内不能使用块级元素
7.2.2 行内元素
行内元素的特点：
- 相邻行内元素在一行上，一行可以显示多个
- 高、宽直接设置是无效的
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
注意：链接里面不能放链接，但是特殊情况下a里面可以放块级元素，最好给a 转换为块级模式更安全。
7.2.3 行内块元素
- 一行可以显示多个
- 默认宽度就是本身内容的宽度
- 高度、行高、外边距以及内边距都可以控制
总结
7.2.4 元素显示模式的转换
| display 其属性 | 作用 |
|---|---|
| inline | 将元素显示为行内元素 |
| block | 将元素显示为块元素 |
| inline_block | 将元素显示为行内块元素 |
案列：小米侧边栏
代码：
7.3 CSS的背景
页面元素既可以添加背景颜色和背景图片
7.3.1 background-color
7.3.2 background-image
background-image实际开发常用logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置
7.3.3 background-repeat
| 参数值 | 作用 |
|---|---|
| no-repeat | 背景图像不平铺 |
| repeat | 背景图像平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向平铺 |
7.3.4 background-position
利用background-position：x y;
参数代表的意思是：x坐标和y坐标，可以使用方位名词和精准单位
| 参数值 | 说明 |
|---|---|
| length | 百分数，由浮点数字和单位标识符组成的长度值 |
| position | top center bottom left center right 方位名词 |
背景图片位置
1.参数是方位名词
- 如果指定的两个值都是方位名词，则两个值前后顺序无关
- 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
2.参数是精准单位
- 如何参数值是精准坐标，那么第一个肯定是x坐标，第二个一定是y坐标
- 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
3.参数是混合单位
- 如果是精确单位和方位名词混合使用那么第一个肯定是x坐标，第二个一定是y坐标
7.3.5 background-attachment
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动
background-attachment后期可以制作视差滚动的效果
| 参数 | 作用 |
|---|---|
| scroll | 背景图像是随对象内容滚动 |
| fixed | 背景图像固定 |
7.3.6 background
当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：
背景色半透明
- 最后一个参数时alpha透明度，取值范围在0~1之间
- 我们习惯把0.3的0省略掉
总结
案例：五彩缤纷导航
7.4 CSS的三大特性
7.4.1 重叠性
7.4.2 继承性
行高的继承
7.4.3 优先级
当同一个元素指定多个选择器，就会有优先级的产生
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
选择器权重如下表所示：
| 选择器 | 选择器权重 |
|---|---|
| 继承或者 * | 0 |
| 标签选择器 | 1 |
| 类选择器，伪类选择器 | 10 |
| ID选择器 | 100 |
| 行内样式 style=“” | 1000 |
| ！important | 无穷大 |
标签选择器<类选择器