HTML+CSS第二周

为网页添加样式

术语解释

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

CSS规则=选择器+声明块

选择器

选择器:选中元素

1.元素选择器
2.id选择器
3.类选择器
尽量多使用类选择器

声明块

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

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
元素内部文字的水平排列方式

选择器

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

简单的选择器

1.ID选择器

2.元素选择器

3.类选择器

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

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

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

7.伪元素选择器
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
绝大部分可替换元素均为行盒。
可替换元素类似于行块盒,盒模型中所有尺寸均有效

你可能感兴趣的:(笔记,css3)