网页设计之第二节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更漂亮，让页面布局更简单。

总结：

1. HTML主要是做结构，显示元素内容
2. CSS美化HTML，布局网页
3. CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构(HTML)与样式(CSS)相分离。

1.2 CSS语法

样式规则

CSS规则由两个主要的部分构成：选择器以及一条或多条声明。

选择器{属性1：属性值1；属性2：属性值2；}

• 选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
• 属性和属性值以"键值对"的形式出现
• 属性是对指定的对象设置的样式设置的样式属性，例如字体大小、文本颜色等
• 属性和属性值之间用英文 “:” 分开
• 多个"键值对"之间用英文 “;” 进行区分

CSS基础选择器

2.1选择器的作用

选择器就是根据 不同需求把不同的标签选出来 这就是选择器的作用.

CSS做了两件事:

1. 找到了标签,选择器 (选对人)
2. 设置这些标签的样式,比如颜色为红色 (做对事)

2.2 选择器的分类

2.2.1 基础选择器

基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器

标签选择器

类选择器

样式点定义 结构类(class)调用 一个或多个 开发最常用

类选择器-多类名

多类名使用方式：

1. 在class属性中写多个类名
2. 多个类名中间必须用空格分开
3. 这个标签就可以分别具有这些类名的样式

使用场景：

1. 可以把一些标签元素相同的样式(共同的部分)放到一个类里面
2. 这些标签都可以调用这个公用的类，然后再调用总结独有的类
3. 从而节省CSS代码，统一修改非常方便

id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式

HTML 元素以id属性来设置id选择器，CSS 中id 选择器以"#"定义

样式#定义 结构id调用 只能调用一次 别人切勿使用

通配符选择器

1. *是全部的意思
2. 不需要调用

总结

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结构语法

1. 生成标签 直接输入标签名按tab键即可 比如 div 然后tab键 就可以生成一对div标签
2. 生成多个相同标签 加上 * 即可 比如 div*3就可以生成3个div
3. 如果有父子级关系的标签 用>即可 比如 ul>li 就可以
4. 如果有兄弟关系的标签 用+即可 比如 div+p
5. 如果生成带有类名或者id名字的，直接写.demo或者#two 按tab键就可以了
6. 如果生成的div类名是有顺序的，可以用自增符号$
7. 如果想要在生成的标签内部写内容可以用{}表示

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 块元素

块元素的特点：

1. 比较霸道，自己独占一行
2. 高度、宽度、外边距以及内边距都可以控制
3. 宽度默认是容器(父级宽度)的100%
4. 是一个容器及盒子，里面可以放行内或者块级元素

注意： 文字类的元素内不能使用块级元素

7.2.2 行内元素

行内元素的特点：

1. 相邻行内元素在一行上，一行可以显示多个
2. 高、宽直接设置是无效的
3. 默认宽度就是它本身内容的宽度
4. 行内元素只能容纳文本或其他行内元素

注意：链接里面不能放链接，但是特殊情况下a里面可以放块级元素，最好给a 转换为块级模式更安全。

7.2.3 行内块元素

1. 一行可以显示多个
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 优先级

当同一个元素指定多个选择器，就会有优先级的产生

• 选择器相同，则执行层叠性
• 选择器不同，则根据选择器权重执行

选择器权重如下表所示：

选择器	选择器权重
继承或者 *
标签选择器	1
类选择器，伪类选择器	10
ID选择器	100
行内样式 style=“”	1000
！important	无穷大

标签选择器<类选择器<id选择器<行内样式表<！inportant