02-CSS常用属性+显示模式+选择器
02-CSS常用属性+显示模式+选择器
1.CSS常用文件属性
- color，字体颜色。
- font-size，字体大小。Chrome默认字体大小16px。
- font-family，字体，chrome默认字体是微软雅黑。
- text-align，字体水平居中。text-align有三个值：left，居左，默认值；center，居中；right，居右。
- font-weight，字体加粗，正常是400或者normal，加粗是700或者bold。
- text-indent，首行缩进。text-indent的单位可以是em，1em等于当前一个字号大小。
- text-decoration，设置下划线。none，去掉下划线；underline，添加下划线。
- font-style，字体倾斜。italic，字体倾斜；normal，正常。
- word-break，强制换行。break-all，强制换行；nowrap，强制不换行。
2.颜色的三种表示方法
- 颜色的第一种表示方式，使用英文单词的方式。如color: red。
- 颜色的第二种表示方式，使用十进制的方式。rgb(x, x, x)，依次为红、绿和蓝的十进制，最大值为255；rgb(0, 0, 0)，黑色；rgb(255, 255, 255)，白色；rgb(255, 0, 0)，红色。
- 颜色的第二种表示方式，使用十六进制的方式。将十进制的255转换为十六进制就是ff，所以使用十六进制表示颜色时，第一和二位表示红，第三和四位表示绿，第五和六位表示蓝；当三种颜色的每两位都相同时，可以简写；如#ff4400，可以简写为#f40。
3.盒子的三个基本属性
- 盒子的三属性分别是：盒子的宽（width）、高（height）和背景色（background），当给盒子设置这三个属性后，网页中就可以呈现出来一个盒子。
- 盒子就是一个标签，一个网页由一个个不同大小的盒子组成。
4.显示模式
- 显示模式有三种：块级显示模式、行内块显示模式和行内显示模式，三种显示模式可以相互转换。
- 块级显示模式的特点。
- 块级元素独占一行。
- 块级元素设置宽高起作用。
- 当没有设置固定宽度时，块级元素和父元素宽度一致。
- 块级元素：html、body、div、h1-h5、p、ol、ul、li、dl、dt、dd、hr、form。
- 行内显示模式的特点。
- 一行可以有多个行内元素。
- 行内元素设置宽高不起作用，行内元素的宽高由行内元素的内容决定，行内元素没有内容时宽高为0。
- 行内元素之间的间隔由代码中的空格决定，当代码中没有空格时，行内元素没有间隔，当代码中有一个或者多个空格、或换行时，行内元素默认有一个间隔的间距。
- 行内元素：span、a、b、strong、i、em、u、ins、u、del。
- 行内块显示模式的特点。
- 一行可以有多个行内块元素。
- 行内块元素可以设置宽高，如果行内块元素没有设置宽和高，宽高由元素的内容大小决定。
- 行内块元素：img、除form外的其他所有表单标签。
5.显示模式的转换
- 其他显示模式转换为行内块显示模式：display: inline-block。
- 其他显示模式转换为块级显示模式：display: block。
6.标签选择器、类选择器和id选择器
-
标签选择器。标签名 {xxx}。
-
类选择器。定义类选择器：.类名 {xxx}；使用类选择器：class="xxx"。
-
类选择器的命名规则：类选择器不能以数字开头；可以使用字母和下划线开头；类选择器可以包含数字、字母和下划线。
-
类选择器的命名规范：建议使用驼峰命名法。
-
id选择器。定义id选择器：#xxx；使用id选择器：id="xxx"。id选择器用于唯一确认一个标签，一般CSS使用类选择器，JS中会较多的使用id选择器。
7.CSS书写位置
- CSS有三个书写位置：内嵌式、行内式和外链式。
<html lang="en">
<head>
<style type="text/css">
/* 1 内嵌式，将css代码嵌入到html中，css代码和html代码相对分类，代码耦合度相对较低。 */
.one {
color: red;
}
</style>
<!-- 3 外链式。将css代码单独写在css文件中，css代码和html代码绝对分离，代码耦合度极低，工作中经常使用。 -->
<link rel="stylesheet" type="text/css" href="css/01-css.css">
</head>
<body>
<div class="one">div01</div>
<!-- 2 行内式。将css代码写在html中，代码耦合度很高，会有代码冗余。 -->
<div style="color: yellow;">div02</div>
<div class="two">div03</div>
</body>
</html>
.two {
color: blue;
}
8.CSS层叠性
<html lang="en">
<head>
<style>
/*
1 CSS样式的层叠性。
不同的属性都可以实现，即都可以被呈现到页面。
相同的属性，在权重相同时后定义的会层叠(覆盖)先定义的；
权重不同时，实现权重高的。
2 从低到高的权重。
标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
*/
div {
color: red;
}
div {
color: blue;
font-size: 50px;
}
.one {
color: orange;
}
#two {
color: black;
}
#three {
color: gray;
}
.four {
color: yellow !important;
}
</style>
</head>
<body>
<div>div01</div>
<!-- 标签选择器 < 类选择器 -->
<div class="one">div02</div>
<!-- 类选择器 < id选择器 -->
<div id="two" class="one">div03</div>
<!-- id选择器 < 行内样式 -->
<div id="three" style="color: green">div04</div>
<!-- 行内样式 < !important -->
<div class="four" style="color: green">div04</div>
</body>
</html>
9.text-align
- text-align: center，可以让文本、行内元素和行内块元素居中。
- 如果需要让文本、行内元素和行内块元素居中，需要给它们的父元素设置text-align: center。
10.后代选择器
/*
1 基础选择器： 标签选择器 类选择器 id选择器。
2 后代选择器会将基础选择器组合使用。
定义后代选择器：后代选择器 选择器 选择器{}(空格表示后代，子子孙孙。)
*/
.one h1 {
color: red;
}
.one div h3 {
color: blue;
}
11.选择器的权重值
/*
1 选择器的权重值。
标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
1 10 100 1000 无穷大
*/
/* 选择器的权重值是1+1=2 */
div h3 {
color: red;
}
/* 选择器的权重值是1+10=11 */
div .one {
color: blue;
}
12.CSS继承性
<html lang="en">
<head>
<style>
/*
1 CSS继承性，标签可以继承父类元素设置的文本属性。
*/
div {
color: red;
font-size: 50px;
}
p {
color: yellow;
}
</style>
</head>
<body>
<div>
<span>tom</span>
<!-- p从div中继承了color: red;，继承样式权重为0，所以p中字体的颜色为yellow。 -->
<p>alice</p>
</div>
</body>
</html>
13.a标签和h标签的继承性
<html lang="en">
<head>
<style type="text/css">
/*
1 h标签和a标签会自带css属性。
h标签默认设置了font-size和font-weight，所以继承的字号和加粗会被自身层叠。
a标签默认设置了color(color: -webkit-link;)和cursor(cursor: pointer;)，所以继承的颜色会被自身层叠。
2 cursor是鼠标样式，pointer值表示小手，help值表示搜索。
3 h1的font-size是2em，即当前font-size*2。如果当前没有设置font-size，默认为16px，即h1的font-size为16*2=32px；如果当前设置了font-size，则h1的font-size为设置值的2倍。
*/
div {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<h1>tom</h1>
<a href="#">超链接</a>
</div>
</body>
</html>
浙公网安备 33010602011771号