HTML+CSS第二周

为网页添加样式

术语解释

h1{
     
   	color:blue;
   	background-color:cadetblue;
   	text-align: center;
   }

CSS规则＝选择器＋声明块

选择器

选择器：选中元素

１.元素选择器
２.id选择器
３.类选择器
尽量多使用类选择器

声明块

出现在大括号中
声明块包括很多声明

CSS代码书写位置

1.内部样式表，书写在style元素里
2.内联样式表（元素样式表）：写在元素的style属性中
3.外部样式表：写在独立的CSS文件中【推荐】

1）外部样式表可以解决多页面重复的问题
2）有利于浏览器缓存，提高页面响应速度
3）有利于代码分离（HTML和CSS），更容易阅读和维护

常见样式声明

1.color
元素内部的文字颜色
预设值：定义好的单词
三原色，色值：每个颜色可以用0-255之间的数字表达
rgb表示法rgb(0,0,0);
hex(十六进制)表示法#008c8c;,分别表示红绿蓝
淘宝红：#ff4400,#f40
紫色：#ff00ff,#f0f
青色：#00ffff,#0ff
黄色：#ffff00,#ff0
浅灰色：#cccccc,#ccc
2.background-color
元素背景颜色
3.font-size
元素内部文字的尺寸大小

1）px：像素，绝对单位
2）em：相对单位，相对于父元素的字体大小
每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，若没有父元素，则使用基准字号

user agent，UA，用户代理(浏览器)

4.font-weight
文字粗细程度，取值可以为数字，也可以为预设值。
strong元素，默认加粗，表示重要的，不能忽略的内容
5.font-family
文字类型
必须用户计算机中存在的字体才有效
使用多种字体以匹配不同情况
sans-serlf：非衬线字体
6.font-style
字体样式，通常用来设置斜体

i元素，em元素，默认斜体样式，表示强调的内容

7.text-decoration
文本修饰，给文本加线

a元素：样式默认加下划线
del元素：错误内容
s元素：过期内容

8.text-indent
首行文本缩进
9.line-height
每行文本的高度，值越大，每行文本的距离越大
设置行高为容器的高度，可以让单行文本垂直居中
行高可设置为纯数字，表示相对于当前元素的字体大小
10.width
宽度
11.height
高度
12.letter-space
文字间隙
13.text-align
元素内部文字的水平排列方式

选择器

选择器的作用:精准选中想要的元素

简单的选择器

１.ID选择器

２.元素选择器

３.类选择器

４.通配符选择器
*,选中所有元素

５.属性选择器
根据属性名和属性值选中元素

６.伪类选择器
选中某些元素的某种状态
1)link:超链接未访问过时的状态
2)visited:超链接访问过后的状态
3)hover:鼠标悬停状态
4)active:激活状态,指鼠标按下状态

７.伪元素选择器
before
after

选择器的组合

1.并且
2.后代元素:空格
3.子元素:>
4.相邻兄弟元素:+
5.后面出现的所有兄弟元素:~

选择器的并列

多个选择器，用逗号隔开

层叠

声明冲突：同一个样式多次应用到同一个元素
层叠：解决声明冲突的过程，浏览器自动处理

1.比较重要性

重要性从高到低：
1)作者样式表中的!important样式
2)作者样式表中的普通央视
3)浏览器默认样式表中的样式

2.比较特殊性

看选择器

总体规则：选择器选中的范围越窄,就越特殊

具体规则：通过选择器计算出一个四位数，比较四位数，四位数越大越特殊（256进制）

1.千位：如果是内联样式则记1，否则记0
2.百位：等于选择器中所有ID选择器的数量
3.十位：等于选择器中所有类属性选择器，属性选择器，伪类选择器的数量
4.个位：等于选择器中所有元素选择器，伪元素选择器的数量

3.比较源次序

代码书写靠后的胜出

应用

1.重置样式表
书写一些作者样式，覆盖浏览器默认样式

常见的样式重置表：
normalize.css，reset.css，meyer.css
2.爱恨法则
link>visited>hover>active

继承

子元素会继承父元素的某些css属性
通常，跟文字内容相关的属性都能被继承

属性值的计算过程

渲染页面时一个一个元素依次渲染，顺序按照页面文档的树形目录结构进行。
渲染每个元素的前提条件：该元素的所有css属性都必须有值。
一个元素从所有属性都没有值到所有属性都有值，整个计算过程叫做属性计算过程

1.确定声明值：参考样式表中没有冲突的声明，作为CSS属性值
2.层叠冲突：对样式表中有冲突的声明使用层叠规则，确定CSS属性值
3.使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值
4.使用默认值：对仍然没有值的属性，使用默认值

两个特殊的CSS取值：
inherit：手动（强制）继承，将父元素的值取出应用到该元素
initial：初始值，将该属性设置为默认值

盒模型

box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）
盒子类型：
1.行盒，display等于inline的元素，在页面中不换行
2.块盒，display等于block的元素，在页面中独占一行
display默认值为inline
浏览器默认样式表设置的块盒：容器元素，文字元素（h1~6，p）
常见的行盒：span，a，img，video，audio

盒子的组成部分

无论是行盒还是块盒，都由以下几个部分组成，从内到外依次是：
1.内容 content
width，height，设置的是盒子内容的宽高
内容分部分通常叫做整个盒子的内容盒 content-box
2.填充(内边距) padding
盒子边框到盒子内容的距离
padding-left，padding-right，padding-top，padding-bottom
padding：简写属性
padding：上 右 下 左
填充区+内容区=填充盒 padding-box
3.外框 border
边框=边框样式(boeder-style)+边框宽度(border-width)+边框颜色(border-color)
边框+填充区+内容区=边框盒 border-box
4.外边距 margin
边框到其他盒子的距离
margin-top，margin-right，margin-bottom，margin-left

盒模型应用

改变宽高范围

默认情况下，width和height设置的是内容盒宽高

页面重构：将psd文件（设计稿）制作为静态页面

衡量设计稿尺寸时往往使用的是边框盒，但设置width和height时，设置的是内容盒。解决方法：
1.精确计算
2.CSS3属性：box-sizing值设置为border-box

改变背景覆盖范围

默认情况下，背景覆盖边框盒
通过background-clip进行修改

溢出处理

属性over-flow，控制内容溢出边框盒后的处理方式，默认溢出部分仍然可见。
hidden隐藏溢出部分
scroll生成滚动条
aotu自动控制滚动条是否出现

段词规则

word-break，会影响文字在什么位置被截断换行。
normal：普通，CJK（中日韩）字符，在文字位置截断，非CJK字符在单词位置截断。
break-all：截断所有，所有字符都在文字位置截断。
keep-all：保持所有。所有字符都在单词位置截断。

空白处理

white-space：nowarp可设置为不换行
text-overflow：ellipsis可设置未显示完时在后面显示三个点。
（只能控制单行文本）

行盒的盒模型

常见的行盒元素：span，strong，em，i，img，video，audio

显著特点

1.盒子沿着内容延伸。
2.行盒不能设置宽高，宽高取决于内容的宽高，应使用字体大小，行高，字体类型等来间接调整。
3.内边距（填充区）：水平方向有效，垂直方向不会实际占据空间。
4.边框：效果同内边距。
5.外边距：效果同内边距。

行块盒

display值为inline-block的盒子
1.不独占一行
2.盒模型中所有尺寸都有效

空白折叠

空白折叠发生在行盒（行块盒）内部或行盒（行块盒）之间。

可替换元素和非可替换元素

大部分元素，页面上显示的结果取决于元素内容，称为非可替换元素。
少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素，例如：img，video，audio
绝大部分可替换元素均为行盒。
可替换元素类似于行块盒，盒模型中所有尺寸均有效