CSS简介
CSS(Cascading Style Sheets) 美化样式
CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。
w3c 手册中文官网 : http://w3school.com.cn/
CSS书写位置
内部样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下:
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
行内式(内联样式)
内联样式,又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式,其基本语法格式如下:
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
外部样式表(外链式)
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中,其基本语法格式如下:
<head>
<link href="CSS文件的路径" rel="stylesheet"/>
</head>
三种位置样式总结
样式表 | 优点 | 缺点 | 使用情况 |
---|---|---|---|
行内样式表 | 书写方便,权重高 | 没有实现样式和结构相分离 | 较少 |
内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 |
外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多,推荐 |
CSS 三大特性
CSS 继承性
子标签会继承父标签的某些样式,如文本颜色,字号 text-,font-,line-这些元素开头的都可以继承,以及color属性
。
<style type="text/css">
.father {
height: 100px;
width: 200px;
font-size: 30px;
color: blue;
background-color: red;
}
</style>
<div class="father">
父标签
<div>子标签</div>
</div>
CSS 层叠性
层叠性是指多种CSS样式的叠加,样式冲突,遵循的原则是就近原则。
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: red;
}
.box {
font-size: 30px;
color: blue;
border: 5px solid black;
}
</style>
<div class="box">
hello
</div>
CSS 优先级
定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题。
!important > 行内样式 > id > class > 标签 > 继承者或*
继承或者* 的贡献值 | 0,0,0,0 |
---|---|
每个元素(标签)贡献值为 | 0,0,0,1 |
每个类,伪类贡献值为 | 0,0,1,0 |
每个ID贡献值为 | 0,1,0,0 |
每个行内样式贡献值 | 1,0,0,0 |
每个!important贡献值 重要的 | ∞ 无穷大 |
权重计算:
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
#nav p -----> 0,1,0,1
选择器
标签选择器
标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下:
div {
width: 100px;
height: 100px;
background-color: red;
}
标签选择器最大的优点是能快速为页面中同类型的标签统一样式
类选择器
类选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下:
.myclass{
width: 200px;
height: 200px;
background-color: green;
}
id选择器
id选择器使用“#”进行标识,后面紧跟id名,其基本语法格式如下:
#myid {
width: 300px;
height: 300px;
background-color: yellow;
}
id选择器和类选择器区别
W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class。
类选择器(class) 好比人的名字, 是可以多次重复使用的, 比如 张伟 王伟 李伟 李娜
id选择器 好比人的身份证号码, 全中国是唯一的, 不得重复。 只能使用一次。
id选择器和类选择器最大的不同在于 使用次数上
通配符选择器
通配符 选择器用“*”号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素。其基本语法格式如下:
使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
CSS字体样式属性
font-size 字体大小
font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。具体如下:
长度单位 | 说明 |
---|---|
px | px是固定像素 |
em | em相对于父元素 |
rem | rem相对于根元素 |
em说明:
<style type="text/css">
.father {
font-size: 40px;
}
.son {
font-size: 0.5em; /*20px*/
}
.grandson {
font-size: 0.5em; /*10px*/
}
</style>
<div class="father">
父元素
<div class="son">
子元素
<div class="grandson">孙子元素</div>
</div>
</div>
rem说明:
<style type="text/css">
html {
font-size: 80px;
}
.father {
font-size: 40px;
}
.son {
font-size: 0.5rem; /*40px*/
}
.grandson {
font-size: 0.5rem; /*40px*/
}
</style>
<div class="father">
父元素
<div class="son">
子元素
<div class="grandson">孙子元素</div>
</div>
</div>
font-family 字体
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等,例如将网页中所有段落文本的字体设置为微软雅黑,可以使用如下CSS样式代码:
可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体。
p{ font-family:"微软雅黑";}
CSS unicode字体
在 CSS 中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。
-
方案一: 你可以使用英文来替代。 比如 font-family:“Microsoft Yahei”。
-
方案二: 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称,浏览器是可以正确的解析的。
字体名称 | 英文名称 | Unicode 编码 |
---|---|---|
宋体 | SimSun | \5B8B\4F53 |
新宋体 | NSimSun | \65B0\5B8B\4F53 |
黑体 | SimHei | \9ED1\4F53 |
微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
隶书 | LiSu | \96B6\4E66 |
幼园 | YouYuan | \5E7C\5706 |
华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |
细明体 | MingLiU | \7EC6\660E\4F53 |
新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |
为了照顾不同电脑的字体安装问题,我们尽量只使用宋体和微软雅黑中文字体
font-weight 字体粗细
字体加粗除了用 b 和 strong 标签之外,可以使用CSS 来实现,但是CSS 是没有语义的。
font-weight属性用于定义字体的粗细,其可用属性值:normal、bold、bolder、lighter、100~900(100的整数倍)。
数字 400 等价于 normal,而 700 等价于 bold。 但是我们更喜欢用数字来表示。
font-style 字体风格
字体倾斜除了用 i 和 em 标签之外,可以使用CSS 来实现,但是CSS 是没有语义的。
font-style属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:
normal:默认值,浏览器会显示标准的字体样式。
italic:浏览器会显示斜体的字体样式。
oblique:浏览器会显示倾斜的字体样式。
font 综合设置(重点)
font属性用于对字体样式进行综合设置,其基本语法格式如下:
选择器{font: font-style font-weight font-size/line-height font-family;}
注意:使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。
其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。
CSS外观属性
color 文本颜色
color属性用于定义文本颜色,取值方式有三种:
- 预定于颜色在:red,green,blue等
- 十六进制,如
#FF0000
,#00FF00
等 - RGB代码,如
rgb(255,0m0)
或rgb(100%,0%,0%)
注意:
CSS3支持半透明写法:rgba(0,0,0,0.3)
line-height 行间距
line-height属性用于设置行间距,就是行与行之间的距离,即字符的垂直间距,一般称为行高。line-height常用的属性值单位有三种,分别为像素px,相对值em和百分比%,实际工作中使用最多的是像素px
一般情况下,行距比字号大7.8像素左右就可以了。
text-align 水平对齐方式
left:左对齐(默认值)
right:右对齐
center:居中对齐
是让盒子里面的内容水平居中, 而不是让盒子居中对齐
text-indent 首行缩进
text-indent属性用于设置首行文本的缩进,其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,允许使用负值, 建议使用em作为设置单位。
1em 就是一个字的宽度 如果是汉字的段落, 1em 就是一个汉字的宽度
text-decoration 文本装饰
text-decoration 通常我们用于给链接修改装饰效果
值 | 描述 |
---|---|
none | 默认。定义标准的文本。 |
underline | 定义文本下的一条线。下划线 也是我们链接自带的 |
overline | 定义文本上的一条线。 |
line-through | 定义穿过文本下的一条线。 |
CSS背景 background
CSS 可以添加背景颜色和背景图片,以及来进行图片设置。
属性 | 说明 |
---|---|
background-color | 背景颜色 |
background-image | 背景图片地址 |
background-repeat | 是否平铺 |
background-position | 背景位置 |
background-attachment | 背景固定还是滚动 |
background-color 背景颜色
background-color : #b0c4de
background-image 背景图片
background-image : none | url (url)
background-repeat 背景平铺
background-repeat : repeat | no-repeat | repeat-x | repeat-y
background-position 背景位置
background-position: left top;
或 background-position: 50% 50%;
或 background-position: left 50px top 50px;
background-attachment 背景固定还是滚动
background-attachment : scroll | fixed
background 简写
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
background-size 背景图尺寸
CSS3属性
background-size:80px 60px;