CSS（Cascading Style Sheet）
层叠样式表，它是用来美化页面的一种语言
CSS选择器
css选择器是用来
选择标签的，选出来以后给标签加样式
css选择器的种类
* 标签选择器
* 类选择器
* 层级选择器（后代选择器）
* id选择器
* 组选择器
* 伪类选择器
标签选择器、类选择器、层级选择器
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签选择器css</title>
<style>
p {
color: red;
}
.lei {
color: blue;
}
.sed {
background-color: burlywood;
}
div div{
color: coral;
}
</style>
</head>
<body>
<!-- 标签选择器 -->
<p>hello world</p>
<p>i am liven</p>
<!-- 类选择器：定义class类名，并且以”.类名“的方式选择标签，给标签添加样式 -->
<p class="lei"> 类选择器</p>
<p class="sed">类选择器，样式可以叠加</p>
<!-- 层级选择器 -->
<!-- 层级选择器要有层级关系，根据层级关系获取子标签，给子标签添加样式 -->
<!-- 层级选择器不一定必须是父子关系，祖孙的子标签也可以找到，完成添加样式的操作 -->
<div>
<div>哈哈哈</div>
</div>
<div>哈哈哈</div>
</body>
id 选择器
id 选择器：根据id选择标签，
以#开头，元素的id名称不能重复，
所以id选择器只能对应于页面上一个元素，不能复用。id名一般给程序使用，
所以不推荐使用id作为选择器
<style>
#box{
color: red;
}
</style>
<p id='box'>这是一个段落标签 </p>
<p>这是第二个段落标签</p>
<p>这是第三个段落标签</p>
组选择器
根据组合的选择器选择不同的标签，以
，分割开，如果有公共的样式设置，可以使用组选择器
<style>
.box1,.box2,.box3 {width: 100px;height: 50px;}
.box1 {color: yellow;}
.box2 {color: red;}
.box3 {color: green;}
</style>
<body>
<!-- 组选择器 -->
<!-- 组选择器，可以给一些有共同样式的标签统一定义样式 -->
<div class="box1">这是第一个</div>
<div class="box2">这是第二个</div>
<div class="box3">这是第三个</div>
</body>
伪类选择器
伪类选择器就是
给其他选择器``添加特殊的效果，表现形式：选择器后面加上冒号再跟上伪类的名字
<style>
div {
width: 100px;
height: 100px;
background-color: yellow;
}
div:hover {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<div>
哈哈哈
</div>
CSS属性
布局常用样式属性
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签选择器css</title>
<style>
.box {
width: 100px;
height: 100px;
/* 设置背景图片，不重复显示图片，拉伸当前显示这个图片 */
background: url(imgs/logo.png) no-repeat;
/* 设置标签的边框 */
/* border: 5px solid red; */
border-top: 5px solid red;
/* 设置浮动,只能设置左浮动和右浮动 */
/* 一般是设置两个div在同一行显示的时候才设置浮动 */
float: right;
}
.box1 {
width: 200px;
height: 200px;
background: yellow;
}
.box2 {
width: 50px;
height: 50px;
background: blue;
float: left;
}
.box3 {
width: 50px;
height: 50px;
background: green;
float: left;
}
</style>
</head>
<body>
<!-- 布局常用控件是div -->
<di class="box">哈哈哈</di>
<!-- div>div*2 创建一个父div在父div里面创建两个子div -->
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
文本常用样式属性
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签选择器css</title>
<style>
p {
/* 文字颜色 */
color: red;
/* 文字大小 */
font-size: 30px;
/* 文字加粗 */
font-weight: bold;
/* 文字字体 */
font-family: "Microsoft Yahei";
/* 背景色 */
background: grey;
/* 划线只能出现一条 */
/* 添加下划线 */
/* text-decoration: underline; */
/* 添加中间划线 */
/* text-decoration: line-through; */
/* 取消划线 */
/* text-decoration: none; */
/* 顶部划线 */
text-decoration: overline;
/* 设置行高，可以设置文字垂直方向居中 */
line-height: 100px;
/* 设置文字水平对齐方式 */
text-align: center;
/* 设置文本缩进 */
text-indent: 30px;
}
span {
color: blue;
}
</style>
</head>
<body>
<!-- span标签可以给文本中一小段内容设置样式 -->
<p>我是会变色的<span>大力</span></p>
</body>
CSS元素溢出
当子元素（标签）的尺寸超过父元素的尺寸时，此时需要设置父元素显示溢出子元素的方式，设置的方法是通过
overflow属性来完成的
overflow的设置项：
visible： 默认值，显示子标签溢出的部分
hidden：隐藏子标签溢出的部分
auto：如果子标签溢出，则可以滚动查看其余的内容
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签选择器css</title>
<style>
.box1 {
width: 100px;
height: 100px;
background: red;
/* 设置元素溢出需要再父标签选择器上进行设置 */
overflow: auto;
}
.box2 {
width: 200px;
height: 50px;
background: blue;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">123456</div>
</div>
</body>
CSS 显示特性
display属性是用来设置元素的类型及隐藏的，常用的属性有：
none：元素隐藏并且不占位置
inline：元素以行内元素显示
block：元素以块元素显示(与div类似，自己独占一行)
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签选择器css</title>
<style>
.box1 {
background: red;
/* 把该标签隐藏并且不占用位置 */
/* display: none; */
}
.box2 {
background: yellow;
/* 设置div可以和其他元素在一行显示，就不能设置宽高 */
/* 以后既设置div的宽高也要在同一行显示，可以通过浮动来完成 */
display: inline;
}
a {
/* 设置标签自己独占一行，不和其他标签在一行显示 */
display: block;
}
</style>
</head>
<body>
<div class="box1">第一个</div>
<div class="box2">第二个</div>
<a href="www.baidu.com">百度</a>
<a href="www.baidu.com">百度</a>
</body>
CSS盒子模式
所谓的盒子模式就是把HTML页面的元素看做一个矩形盒子，矩形盒子是有
内容（content）、内边距（padding）、边框（border）、外边距（margin）四部分组成
盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下
CSS的三种引入方式
（1）行内式
直接在标签的style属性中添加css样式
<div style="width:100px;height:100px;background:red">helloworld</div>
优点：方便、直观
缺点：缺乏可重用性
（2）内嵌式（内部样式）
在<head>标签内加入<style>标签，在<style>标签中编写css代码
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签选择器css</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
优点：在同一个页面内部便于复用和维护
缺点：在多个页面之间的可重用性不高
（3）外链式
将css代码写在一个单独的.css文件中，在<head>标签中使用<link>标签直接引入该文件到页面中
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签选择器css</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
优点：使得css样式与html页面分离，便于整个页面系统的规划和维护，可重用性高。
缺点：css代码由于分离到单独的css文件，容易出现css过于集中，若维护不当则极容易造成混乱
网友评论