一、CSS简介
使用CSS的目的就是让网页美观一致。
1、CSS概念
CSS：层叠样式表，又叫级联样式表，简称样式表。CSS文件的后缀名为 .css 用于HTML文档中元素样式的定义。
2、CSS语法
CSS的规则由两个主要组成部分：选择器，和一条或多条声明。
选择器：
选择器通常是所需要改变样式的HTML元素。
声明：
每条声明通常由一个属性和一个值组成
属性：
属性（property）是你希望设置的样式属性（style attribute）。每个属性有一个值，属性和值被冒号分开。
<style>
h1{ /*h1是选择器*/
color: red; /*color是属性，red是值*/
font-size: xx-small; /*font-size是属性，xx-small是值*/
}
</style>二、CSS的引入方式
1、内联样式（行内样式）
使用内联样式，需要在相关标签内使用样式（style）属性，Style属性可包含任何CSS属性。
<P style="background: orange; font-size: 24px;">CSS<p>注意：行内样式缺乏整体性和规划性，不利于维护，维护成本高。
2、内部样式
当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用<style>标签在文档头部定义内部样式表。
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1{ /*h1是选择器*/
color: red; /*color是属性，red是值*/
font-size: xx-small; /*font-size是属性，xx-small是值*/
}
</style>
</head>注意：单个页面内的CSS代码具有统一性和规划性，便于维护，单在多个页面之间容易混乱。
3、外部样式（推荐）
当样式需要应用于很多页面时，应使用外部样式表。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面用<link>标签链接到样式表。<link>标签在头部。
<link rel="stylesheet" type="test/css" href="mycss.css">
rel属性:
rel属性指定了链接的关系，这里是stylesheet，表示链接的是一个样式表；
type属性：
type属性指定了链接的MIME类型，这里是text/css，表示链接的是CSS文件；
href属性：
href属性指定了链接的文件路径，这里是mycss.css，表示链接的是当前目录下名为mycss.css的文件。
三、选择器
1、全局选择器
可以与任何元素匹配，优先级最低，一般做样式初始化。用*{ }。
*{
margin: 0;
padding: 0;
}2、元素选择器
HTML文档中的元素，p,a,div,img,h1等。标签选择器，选择的是页面上所有这种类型的标签。
p{
font-size:14px;
}注意：所有的标签都可以是选择器，比如 ul, li, lable, dt, dl, input,div等 。且无论这个标签藏得多深，一定能够被选择上。
3、类选择器
规定用 . 来定义，针对你想要的所有标签使用。优点：灵活。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.s1{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<h1>我是标题</h1>
<div class="s1"></div>
</body>
</html>4、ID选择器
针对某一个特定标签使用，只能使用一次，以#来定义。
<p id="myid">我是ID选择器</p>
#myid{
color:red;
}注意：ID是唯一的，且ID不能以数字开头。
5、合并选择器
多个标签使用，相当于多个选择器提取了公共样式，减少了重复代码。语法：选择器1，选择器2...{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.s1,.s2,#s3{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<h1>我是标题</h1>
<div class="s1"></div>
<div class="s2"></div>
<div id="s3"></div>
<p></p>
</body>
</html>
6、选择器的优先级
CSS中，权重用数字衡量，权重越大，优先级越高。
- 元素选择器的权重：1
- class选择器的权重：10
- ID选择器的权重：100
- 内联样式的权重：1000
- 优先级从高到低：行内样式>ID选择器>类选择器>元素选择器>全局选择器
7、关系选择器
1、后代选择器
选择所有被E元素包含的F元素，中间用空格隔开。
语法:
E F{ }
2、子代选择器
选择所有作为E元素的直接子元素F，对更深一层不起作用，用>表示。
语法：
E>F{ }
3、相邻兄弟选择器
选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素
语法：
E+F{ }
4、通用兄弟选择器
选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开
语法：
E~F{ }
四、字体属性
CSS字体属性定义字体、颜色、大小、粗细、文字样式
1、color
规定文本颜色
div{ color：red;}
div{ color: #ff0000;}
div{ color: rgb(255,0,0);}
div{ color:rgba(255,0,0,0.5):}
2、font-size
规定文本大小
h1{ font-size:40px; }
p{ font-size:20px;}
提示：chrome浏览器接受的最小字体是12px
3、font-weight
设置文本的粗细
属性值：
| 值 | 描述 |
| bold | 定义粗体字符 |
| bloder | 定义更粗的字符 |
| lighter | 定义更细的字符 |
| 100-900 | 定义由细到粗 400等同默认 700等同blod |
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.s1{
font-weight: bolder;
}
.s2{
font-weight: bold;
}
.s3{
font-weight: lighter;
}
.s4{
font-weight: 400;
}
</style>
</head>
<body>
<div class="s1">我是更粗体</div>
<div class="s2">我是粗体</div>
<div class="s3">我是细体</div>
<div class="s4">我是默认</div>
</body>
</html>效果呈现：
4、font-family
设置文本的字体系列,每个值用逗号隔开，如果字体名称包含空格，它必须加上引号。
font-family:"Microsoft YaHei","Simsun","SimHei";
5、font-variant
以小型大写字体或者正常字体显示文本。
| 值 | 描述 |
|---|---|
| normal | 默认值。浏览器会显示一个标准的字体。 |
| small-caps | 浏览器会显示小型大写字母的字体。 |
| inherit | 规定应该从父元素继承 font-variant 属性的值。 |
6、font-style
设置文本的字体样式
属性值：
| 值 | 描述 |
|---|---|
| normal | 默认值。浏览器显示一个标准的字体样式。 |
| italic | 浏览器会显示一个斜体的字体样式。 |
| oblique | 浏览器会显示一个倾斜的字体样式。 |
| inherit | 规定应该从父元素继承字体样式。 |
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.s1{
font-style: normal;
}
.s2{
font-style: italic;
}
.s3{
font-style: oblique;
}
.s4{
font-style: inherit;
}
</style>
</head>
<body>
<div class="s1">我是默认</div>
<div class="s2">我是italic斜体</div>
<div class="s3">我是oblique斜体</div>
<div class="s4">我是继承</div>
</body>
</html>效果呈现：
五、背景属性
1、background-color
background-color 属性定义了元素的背景颜色
颜色的值的三种方式定义：
- 十六进制："#ff0000"
- RGB："rgb(255,0,0)"
- RGBA："rgba(255,0,0，0.5)"
- 颜色名称："red"
2、background-image
background-image 属性描述了元素的背景图像.默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.s1{
width: 1200px;
height: 800px;
background-image:url(../../resoure/image/1.jpg);
}
</style>
</head>
<body>
<div class="s1"></div>
</body>
</html>效果呈现：
3、background-repeat
设置背景图像是否及如何重复。
属性值：
| 值 | 说明 |
|---|---|
| repeat | 背景图像将向垂直和水平方向重复。这是默认 |
| repeat-x | 只有水平位置会重复背景图像 |
| repeat-y | 只有垂直位置会重复背景图像 |
| no-repeat | background-image 不会重复 |
| inherit | 指定 background-repeat 属性设置应该从父元素继承 |
举例：例如，只允许图片垂直排列重复
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.s1{
width: 1200px;
height: 800px;
background-color: aqua;
background-image:url(../../resoure/image/1.jpg);
background-repeat:repeat-y;
}
</style>
</head>
<body>
<div class="s1"></div>
</body>
</html>效果呈现：
4、background-position
设置背景图像的起始位置
属性值：
| 值 | 描述 |
|---|---|
| left top left center left bottom right top right center right bottom center top center center center bottom | 如果仅指定一个关键字，其他值将会是"center" |
| x% y% | 第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％ |
| xpos ypos | 第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions |
| inherit | 指定background-position属性设置应该从父元素继承 |
5、 background-attachment
设置背景图像是否固定或者随着页面的其余部分滚动。
属性值：
| 值 | 描述 |
|---|---|
| scroll | 背景图片随着页面的滚动而滚动，这是默认的。 |
| fixed | 背景图片不会随着页面的滚动而滚动。 |
| local | 背景图片会随着元素内容的滚动而滚动。 |
| initial | 设置该属性的默认值。 |
| inherit | 指定 background-attachment 的设置应该从父元素继承 |
六、文本属性
1、text-align
指定文本的对齐方式。
属性值：
| 值 | 描述 |
|---|---|
| left | 文本居左排列，默认值 |
| right | 文本居右排列 |
| center | 文本居中排列 |
2、text-decoration
向文本添加修饰,下划线、上划线、删除线等。
属性值：
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| inherit | 规定应该从父元素继承 text-decoration 属性的值。 |
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
text-decoration: overline
}
h2 {
text-decoration: line-through
}
h3 {
text-decoration: underline
}
h4 {
text-decoration: none;
}
</style>
</head>
<body>
<h1>我是标题一</h1>
<h2>我是标题二</h1>
<h3>我是标题三</h1>
<h4>我是标题四</h1>
</body>
</html>效果呈现：
3、text-transform
控制元素中的字母
属性值：
| 值 | 描述 |
|---|---|
| none | 默认。定义带有小写字母和大写字母的标准的文本。 |
| capitalize | 文本中的每个单词以大写字母开头。 |
| uppercase | 定义仅有大写字母。 |
| lowercase | 定义无大写字母，仅有小写字母。 |
| inherit | 规定应该从父元素继承 text-transform 属性的值。 |
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
text-transform: uppercase;
}
h2 {
text-transform: capitalize;
}
p {
text-transform: lowercase;
}
</style>
</head>
<body>
<h1>This is my CSS</h1>
<h2>This is my CSS</h1>
<p>This is my CSS</p>
</body>
</html>效果呈现：
4、text-indent
缩进元素中文本的首行。
属性值：
| 值 | 描述 |
|---|---|
| length | 定义固定的缩进。默认值：0。 |
| % | 定义基于父元素宽度的百分比的缩进。 |
| inherit | 规定应该从父元素继承 text-indent 属性的值。 |
5、其他属性：
| 属性 | 描lor |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向。 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-shadow | 设置文本阴影 |
| unicode-bidi | 设置或返回文本是否被重写 |
| vertical-align | 设置元素的垂直对齐 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |
七、表格属性
1、表格边框
指定CSS表格边框，使用border属性。
table, th, td{
border: 1px solid black;
}
2、折叠边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开。
table{
border-collapse:collapse;
}
table,th, td{
border: 1px solid black;
}
3、表格宽度和高度
Width和height属性定义表格的宽度和高度。
下面的例子是设置100％的宽度，50像素的th元素的高度的表格：
table {
width:100%;
}
th{
height:50px;
}
4、表格文字对齐
表格中的文本对齐和垂直对齐属性。
text-align属性设置水平对齐方式，向左，右，或中心：
td{
text-align:right;
}
垂直对齐属性设置垂直对齐，比如顶部，底部或中间：
td{
height:50px;
vertical-align:bottom;
}
5、表格填充
如需控制边框和表格内容之间的间距，应使用td和th元素的填充属性：
td{
padding:15px;
}
6、表格颜色
下面的例子指定边框的颜色，和th元素的文本和背景颜色：
table, td, th{
border:1px solid green;
}
th{
background-color:green;
color:white;
}
扫一扫
602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
