一、基本语法
选择器 { 属性:值;
属性:值;
属性:值;}
例如：
div{ width:100px; height:100px; color:red }
二、页面引入的方式
a.外联式
通过link标签，链接到外部样式表到页面中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文件</title>
<link rel="stylesheet" href="./main.css" type="text/css"><!-- 从外面引入 -->
</head>
<body>
<div>第一个额样式</div>
</body>
</html>
div{
color: blue;
font-size: 16px;/* 文字默认16px */
}
b.嵌入式
通过style标签，在网页上创建嵌入的样式表。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
color: black;
}
</style>
<title></title>
</head>
<body>
<div>
这个是一块内容
</div>
</body>
</html>
c.内联式
通过标签的style属性，在标签上直接写样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="color: black;">这个是一块内容</div>
</body>
</html>三、常用文本样式
| key | 作用 | demo |
| color | 设置文字的颜色 | color:red; |
| font-size | 设置文字的大小 | font-size:12px; |
| font-family | 设置文字的字体 | font-family:'微软雅黑'; |
| line-height | 设置文字的行高。设置行高相当于在每行文字的上下同时加间距 | line-height:24px; |
| text-indent | 设置文字首行缩进 | text-indent:24px; |
| text-align | 设置文字水平对齐方式 | text-align:center 居中 |
| text-decoration | 设置文字的下划线 | text-decoration:none; 将文字下划线去掉 |
| font | 同时设置文字的几个属性。 font：是否加粗 字号/行高 字体； | font:normal 12px/36px '微软雅黑'; |
| font-style | 设置字体不倾斜 | font-style:'normal'; |
| 设置字体倾斜 | font-style:'italic'; | |
| font-weight | 设置加粗 | font-weight:bold; |
| 设置不 | font-weight:normal； |
<!DOCTYPE html>
<html>
<head>
<style>
div{
/* font-size: 20px; */
color: pink;
/* line-height: 40px; */
font: normal 20px/40px "微软雅黑";
text-indent: 40px;/* 缩进 */
/* text-decoration: underline;/* 设置下划线 */ */
}
em{
font-style: normal;
color: goldenrod;
}
span{
color: red;
}
h1{
font-weight: normal;
}
a{
text-decoration: none;
}
p{
text-align: center;/* 设置水平居中 */
}
</style>
<meta charset="utf-8">
<title>常用文本样式</title>
</head>
<body>
<a href="www.baidu.com">百度</a>
<h1>样式演示</h1>
<div>
<span>HTML</span>是<em> HyperText Mark-up Language </em>的首字母简写
，意思是超文本标记语言
，超文本指的是超链接
，标记指的是标签
，是一种用来制作网页的语言
，这种语言由一个个的标签组成
，用这种语言制作的文件保存的是一个文本文件
，文件的扩展名为html或者htm，一个html文件就是一个网页
，html文件用编辑器打开显示的是文本
，可以用文本的方式编辑它
，如果用浏览器打开
，浏览器会按照标签描述内容将文件渲染成网页
，显示的网页可以从一个网页链接跳转到另外一个网页。
</div>
<p>这个是一个p标签</p>
</body>
</html>
<!--
行高在底部和顶部加间距
行高等于一行的底部与上一行的底部的距离-->
<!-- font同时设置几个属性:是否加粗 字号/行高字体 字体 如：
font: normal 12px/15px "微软雅黑" "" --> 
行高：行高等于一行的底部与上一行的底部的距离。
四、css颜色表示方法
a.英文名表示
color: red;
b.十六进制表示
color:#fff;
c.rgb表示
color:rgb(255, 0, 0)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p{
font-size: 20px;
color: rgb(200, 200, 200);
}
h1{
font-size: 20px;
color: #ff00ff;/* ff表示255可以简写为#f0f */
}
he{
font-size: 20px;
color: red;
}
</style>
<title></title>
</head>
<body>
<p>这个是一个p标签</p>
<h1>这个是一级标签</h1>
<h3>这个是三级标签</h3>
</body>
</html>
五、css选择器
a.标签选择器
格式：标签名{样式}
范围：对所有的此标签起作用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
color: rebeccapurple;
}
</style>
<title></title>
</head>
<body>
<div>这个是div一个</div>
</body>
</html>b.id选择器
格式：#id{样式}并且在相应的标签中设置id键
作用范围：设置了此id的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#x{
color: rebeccapurple;
}
</style>
<title></title>
</head>
<body>
<div id="x">这个是div一个</div>
</body>
</html>c.类选择器
格式：.类名{样式}并且在相应的标签中设置class键值
范围：设置了此类名的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.big{
color: rebeccapurple;
}
</style>
<title></title>
</head>
<body>
<div class="big">这个是div一个</div>
</body>
</html>d.层级选择器
本质上是通过已拆除间的关系进而锁定需要的标签。如下面代码第一个表示div里面有big class值的标签。同时也可以向第三个一样表示有class值为do的里面中class值为gr的标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div .big{
color: rebeccapurple;
}
.do{
background-color: aqua;
}
.do .gr{
color: red;
}
</style>
<title></title>
</head>
<body>
<div class="do">
<span class="big">这个表示一行</span>
<div class="gr">这个是一块</div>
</div>
</body>
</html>e.组选择器
例子：.do,.gr{ color: red;}使用“，”将两个一样的样式的连接起来
意义：表示这几个具有一样的样式。
对比：对于层级来说使用空格表示层级关系，对于同一组的来说使用逗号将其连接起来。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.do,.gr{
color: red;
}
</style>
<title></title>
</head>
<body>
<div class="do">
<span class="gr">这个表示一行</span>
<div class="gr">这个是一块</div>
</div>
</body>
</html>f.伪类及伪元素选择器
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.link{
font-size: 30px;
text-decoration: none;
color: red;
}
/* 鼠标放上去变颜色伪类选择器最常见的就hover定义另外一个状态 */
.link:hover{
color: gold;
font-weight: bold;
}
/* 插入文字用的，并且插入的文字选不动 */
.box1,.box2{
font-size: 20px;
}
.box1:before{
content: '前面的文字';
color: red;
}
.box2:after{
content: '后面的文字';
color: red;
}
</style>
<title></title>
</head>
<body>
<a href="www.baidu.com" class="link">百度</a>
<div class="box1">这个是第一个div</div>
<div class="box2">这个是第二个div</div>
</body>
</html>
<!-- 伪类和伪元素选择器一般用于a标签 -->
g.复合demo
demo1类选择器和id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
/* 选择所有标签 */
*{
font-size: 20px;
}
/* 所有div标签 */
div{
color: red;
}
#div1{
color: black;/* 与id值相关联id只允许一个不要两个.不常用,一般程序用 */
}
/* 所有class为big的 */
.big{
font-size: 40px;
}
/* 所有class为green的 */
.green{
color: green;
}
/* 类选择器：一个类可应用多个元素，一个元素也可以使用多个类最常用 */
</style>
<title>css选择器</title>
</head>
<body>
<div id="div1" class="big green">这个是第一个div</div><!-- id的权重高于class -->
<div>这个是第二个div</div>
<div>这个是第三个div</div>
<p>这个是一个p标签</p>
</body>
</html>
注意：id选择器的等级比类选择器高
demo2层级选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box{
font-size: 20px;
line-height: 40px;
color: black;
}
/* 层级选择器一般和类选择器搭配使用 */
.box span{
color: red;
}
.box em{
font-style: normal;
text-decoration: underline;
font-weight: bold;
color: pink;
}
/* 两个类组成的层级选择器，层级选择器最好不要超过四层 */
.box .span2{
color: yellow;
}
</style>
<title></title>
</head>
<body>
<div class="box">
主要应用在选择父元素下的子<span>元素</span>，
或者子元素下面的子<span class="span2">元素</span>，
可与标签元素结合使用，减少命名，
同时也可以通过层级，
<em>防止命名冲突</em>。
</div>
<div class="box1">
主要应用在选择父元素下的子<span>元素</span>，
或者子元素下面的子元素，
可与标签元素结合使用，减少命名，
同时也可以通过层级，
防止命名冲突。
</div>
</body>
</html>
<!-- 层级选择器 -->
demo3组选择器
六、总结
学习了样式选择器的id值、class、直接标签。还有css引入的三种方法。介绍了css样式最基本的几个包括字体颜色字号缩进等。伪类和伪元素选择器控制鼠标在上面完成变色——.link:hover{鼠标在其上面的样式}。
text-align水平居中
height=line-height设置垂直方向居中
2735
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
