概述
css概述
1.css是什么？
css是级联样式表（Cascading Style Sheets），是样式表语言。
级联：就是关联，是两个及以上的内容间的关系；
样式表：css修饰网页的语法集。
css与html的关系：html是定义网页内容，css是定义网页样式。
它的优点：可将页面的内容与表现形式分离，达到可重复利用。
2.css做什么？
css的作用是为html控制外观。
3.css基本语法
（1）css三种样式表
①行内样式表
行内样式表是直接将css样式写在标签行内。
<!--
行内样式表：直接将样式写在标签行内
-->
<p style="color: red;font-size: 20px;">春眠不觉晓，</p>
<p style="color: red;font-size: 20px;">处处闻啼鸟。</p>
②内嵌样式表
内嵌样式表是将css样式与内容分离，在head标签中写。
<head>
<meta charset="utf-8" />
<title></title>
<!--
内嵌样式表:将css样式与内容分离，在head标签中写
-->
<style type="text/css">
p{
color: blue;
font-size: 30px
}
</style>
</head>
<body>
<p>春眠不觉晓，</p>
<p>处处闻啼鸟。</p>
</body>
③外部样式表
外部样式表是将css样式提取到一个css文件中，然后在html中将css文件导入。
<head>
<meta charset="utf-8" />
<title></title>
<!--
外部样式表：将css样式表提取到.css文件中，然后在html中将css文件导入
导入外部样式表
-->
<link href="css/file1.css" rel="stylesheet" />
</head>
<body>
<p>春眠不觉晓，</p>
<p>处处闻啼鸟。</p>
</body>
（2）css选择器
①标签选择器
通过标签选择器可以选择页面中所有指定的标签。
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 标签选择器 可以选中网页中所有指定的标签 */
p{
color: aqua;
font-size: 20px;
}
</style>
</head>
<body>
<p>春眠不觉晓，</p>
<p>处处闻啼鸟。</p>
</body>
②类选择器
通过标签的class属性值来匹配指定类名对应的标签。
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 类选择器 匹配指定的类名对应的标签
在head标签中*/
.p1{
color: red;
font-size: 20px;
}
.p2{
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<p class="p1">春眠不觉晓，</p>
<p class="p2">处处闻啼鸟。</p>
<p class="p1">夜来风雨声，</p>
<p class="p2">花落知多少。</p>
</body>
选择器组合：提取公共属性
/* 类选择器 匹配指定的类名对应的标签
在head标签中用.类名来指定 */
.p1{
color: red;
}
.p2{
color: blue;
}
/* 选择器组合 提取公共属性 */
.p1,.p2{
font-size: 20px;
}
③id选择器
通过标签的id属性值选中唯一的一个标签。
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* id选择器 通过标签的id属性值选中唯一的一个标签。 */
#name{
color: green;
font-size: 30px;
}
</style>
</head>
<body>
<p id="name">春晓</p>
<p class="p1">春眠不觉晓，</p>
<p class="p2">处处闻啼鸟。</p>
<p class="p1">夜来风雨声，</p>
<p class="p2">花落知多少。</p>
</body>
④通配选择器
通过使用通配选择器可以用来选择页面中所有的标签。
/* 通配选择器 可以用来选择页面中所有的标签 */
*p{
color: green;
font-size: 30px;
}
（3）其他选择器
后代选择器、子标签选择器、相邻选择器、兄弟选择器
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 后代选择器 选中指定标签的指定后代标签*/
.p1 b{
color: red;
}
/* 子标签选择器 选中指定父标签的指定子标签*/
.p1>.b1{
color: blue;
}
/* 相邻选择器 选中指定标签的相邻标签 */
.p1+p{
color: green;
}
/* 兄弟选择器 选中指定标签的兄弟标签*/
.p1~p{
color: blueviolet;
}
</style>
</head>
<body>
<p class="p1">
<b class="b1">p的子标签</b>
<b>p的子标签</b>
<i>
<b >p的孙子标签</b>
<b class="b1">p的孙子标签</b>
</i>
</p>
<h1>标题标签</h1>
<p class="p2">
<b>p的子标签</b>
<b>p的子标签</b>
</p>
<p class="p2">
<b>p的子标签</b>
<b>p的子标签</b>
</p>
</body>
（4）选择器的优先级
由低到高：通配选择器<标签选择器<类选择器<id选择器
注：行内样式表的优先级高于所有选择器。
（5）文本
<style type="text/css">
p{
color: #008000;
font-size: 30px;
font-family: 楷书;
/* text-align: center; 文本居中对齐*/
/* text-decoration: underline; 文本下加下划线 */
/* text-decoration: line-through; 穿过文本的线 */
/* font-style: italic; 斜体 */
/* font-weight: bold; 加粗 */
/* line-height: 100px; 行高 */
/* letter-spacing:50px; 指定字符间距 */
/* text-indent: 2em; 首行缩进*/
}
a{
/* text-decoration: none; 取消超链接下面的下划线*/
}
</style>
（6）背景
<style type="text/css">
p{
height: 600px;
width: 800px;
/* background-color: aqua; 背景颜色 */
/* background-image: url(img/bg.jpg); 背景图片 */
/* background-repeat: no-repeat; 背景重复 */
/* background-size: ; 背景尺寸 */
/* background-position: center; 背景位置 */
}
</style>
（7）列表
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.u1{
text-align: center;
/* list-style-image: url(img/img.jpg); 将图像设为列表项标志
list-style-position:inside ; 设置列表中列表项标志的位置
list-style-type: circle; 设置列表项标志的类型*/
/* list-style: url(img/img.jpg) inside ;
简写属性 ，在此属性下可写出所有的属性值 用空格隔开*/
}
</style>
</head>
<body>
<ul class="u1" >
<li >列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
</body>
（8）伪类
css伪类专门用来表示标签的一种特殊的状态，当我们需要为处在这些特殊状态的标签设置样式时，就可以使用伪类。
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* :link表示普通的链接（没访问过的链接） */
a:link{
color: #0000FF;
}
/* :visited 表示访问过的链接 只能设置字体的颜色*/
a:visited{
color: #008000;
}
/* :hover 表示鼠标移入的状态 */
a:hover{
color: #8A2BE2;
text-decoration: none;
font-size: large;
}
/* :action 表示被点击的状态，必须放到:hover后面才是有效的 */
a:active{
color: #FF0000;
}
/* :focus 向拥有键盘输入焦点的标签添加样式 */
.t1:focus{
color: aqua;
background-color: #FF0000;
font-size: large;
}
.t1:hover{
color: #8A2BE2;
background-color: fuchsia;
text-decoration: none;
font-size: large;
}
.t1:active{
background-color: blue;
}
.t2:hover{
color: aliceblue;
background-color: pink;
border: 0;
font-size: large;
}
.t2:active{
background-color: blue;
background-image: url(img/bg.jpg);
font-size: 300px;
}
</style>
</head>
<body>
<a href="背景.html">背景</a>
<a href="选择器1.html">选择器</a><br />
<input type="text" class="t1" /><br />
<input type="button" value="提交" class="t2" />
（9）块级，行级，行级块标签
<body>
<!--
块级标签:无论内容有多少 都会独占一行
默认宽:与父级的标签一致
默认高:0 / 内容的高度
还可以通过width和height设置宽高
h1..h6 p hr ul ol li 表格 表单
-->
<p>
<h1 style="width: 300px;">
abcd
</h1>
</p>
<!--
行级标签:只占自身大小,并不会占一行
设置宽高无效
a,b,i
-->
<a href="" style="width: 200px;">百度1</a><a href="">百度1</a><a href="">百度</a>
<b>百度</b> <i>百度</i>
<hr/>
<!--
行级块标签: 可以设置宽高,不占一行
img,input
-->
<img src="img/photo.jpg" width="100" height="100" />111111111111111
<input style="width: 200px;"/>
</body>
（10）display
通过display样式可以修改标签的类型。
<body>
<!--
display: inline; 将标签变为行级标签
-->
<p style="display: inline; width: 200px;">春眠不觉晓</p>处处闻啼鸟
<hr/>
<!--
display: block; 块级标签
display: inline-block; 行级块标签
-->
<b style="display: inline-block; width: 200px;">春眠不觉晓</b>处处闻啼鸟
<hr/>
<!-- 让标签消失不占网页空间 -->
<p style="display: none;">春眠不觉晓</p>处处闻啼鸟
</body>
(11)div和span标签
<body>
<!-- div是块级标签，可以放置任何标签
div没有任何附加功能，给了什么属性就能变成什么样
div主要作用是被用来布局网页-->
<div style="background-color: #008000; height: 200px;">
div是一个纯净版的块级标签(没有任何的附加的功能),通过css调整.
</div>
<!-- span是行级标签
span没有任何附加功能，给了什么属性就能变成什么样
span标签被用来选中文档中的文字-->
<span style="color: red;" class="" id="">span是一个纯净版的行级标签</span>
</body>
最后
以上就是专一小蘑菇为你收集整理的css概述css概述的全部内容，希望文章能够帮你解决css概述css概述所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复