CSS
CSS即Cascading Style Sheet(级联样式表)，是一种样式表语言，用于为HTML文档修饰外观，定义布局。
优先级:行级样式表 > 内嵌样式表 > 外部样式表
- 行级样式表
直接定义在需要修饰的标签中，优先级最高。
<p style="color: red;font-size: 30px;">
举头望明月，
</p>
- 内嵌样式表
定义在html文件中的head中，通过style标签声明，通过选择器进行选择修饰。
<!-- head中通过选择器等来修饰 -->
<style type="text/css">
pre{
color: red;
font-size: 20px;
}
</style>
<!-- body中 -->
<pre>举头望明月，</pre>
<pre>低头思故乡。</pre>
- 外部样式表
定义在.css文件中，通过在head中的标签导入html文件中
<!-- .css文件 -->
div{
color: royalblue;
font-size: 40px;
}
<!-- .html文件-->
<!-- head标签中导入.css文件-->
<link href="../css/css外部样式表.css" rel="stylesheet" type="text/css"/>
<!-- body中-->
<div>举头望明月，</div>
<div>低头思故乡。</div>
选择器
优先级: id > 类选择器 > 标签选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css选择器</title>
<style type="text/css">
/* 标签选择器 */
label{
color: red;
font-size: 40px;
}
/* 类选择器 */
.c{
color: lightblue;
font-size: 20px;
}
/* id选择器 */
#i{
color: white;
}
/* 组合选择器 */
.c,#i{
background-color: #808080;
}
/* *通配选择器，匹配网页上所有的标签 */
*{
/* 将文本放在浏览器的正中央 */
text-align: center;
}
</style>
</head>
<body>
<label>恰逢佳节</label>
<p class="c">金秋送爽，万里河山披锦绣，</p>
<p class="c">丹桂飘香，一轮明月寄深情。</p>
<p id="i">万家灯火，赏良辰美景，</p>
<p id="i">海上明月，观盛世繁华。</p>
<p>月满中秋日，恰逢国庆日。</p>
<p>举杯邀明月，共享好时节。</p>
</body>
</html>
- 后子代选择器
- 父标签：即直接包含子标签的标签
- 子标签：即直接被父标签包含的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css后子代选择器</title>
<style type="text/css">
/* 后代标签选择器 */
p b{
color: red;
}
/* 子标签选择器 */
p > font{
color: skyblue;
}
/* 指定相邻标签 */
b + font{
/* 向后相邻 */
font-size: 30px;
}
/* 兄弟选择器 */
b ~ font{
/* 向后兄弟 */
background-color: black;
}
</style>
</head>
<body>
<p>
<font>尊重</font>自然,
<b>顺应</b>自然，
<font>保护</font>自然，
<p>
<b>可持续发展</b>，坚持<font>绿色</font>，包容，发展<font>理念</font>
</p>
<div>
构建人类生态<font>共同体</font>
</div>
</p>
</body>
</html>
- css修饰文本
color：字体颜色
font-size：字体大小
font-family：字体
text-align：文本对齐
text-decoration:line-through：定义穿过文本下的一条线
text-decoration:underline：定义文本下的一条线
text-decoration:none：定义标准的文本
font-style: italic;斜体文本
font-weight:字体粗细
line-height:设置行高
letter-spacing可以指定字符间距
text-indent用来设置首行缩进
- css修饰背景
background-color背景颜色
background-image背景图片
background-repeat背景重复
background-size背景尺寸
background- position 背景位置
- css修饰列表
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
list-style 简写属性
- css修饰表格
/* 设置表格的边框为单边框 因为当cellspacing="0"时边框会重叠，变的粗黑*/
border-collapse: collapse;
伪类
- 注意需要用":"引用
:link没有访问过的链接
:visited访问过的链接(前两种多用于超链接)
:hover鼠标移入的状态
:active鼠标点击时的状态
:focus鼠标聚焦时的状态(一般用于input标签)
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a标签的伪类</title>
<style type="text/css">
/* 没有访问过的链接 */
a:link{
color: #87CEEB;
}
/* 访问过链接 */
a:visited{
color: red;
}
/* 鼠标移入时的状态 */
a:hover{
color: greenyellow;
}
/* 鼠标点击时 */
a:active{
color: blue;
}
</style>
</head>
<body>
<a href="http:www.baidu.com">百度</a>
<a href="https://www.sina.com.cn/">新浪</a>
<a href="http:www.qq.com">腾讯</a>
</body>
</html>
对于其他标签的伪类作用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 鼠标聚焦时 */
input:focus{
background-color: #87CEEB;
}
/* 鼠标移入时 */
p:hover{
color: red;
background-color: #ADFF2F;
}
/* 鼠标点击时 */
p:active{
color: white;
background-color: black;
}
</style>
</head>
<body>
<label for="inp">账号:</label>
<input type="text" id="inp"/>
<p>
该文本只为测试p标签的伪类
</p>
</body>
</html>
标签分类
- 块级标签
块级标签是一个可以设置宽高**(内容大小**)的标签，而且独占一行。
- 行级标签
行级标签是个以内容撑开的标签，设置宽高是无效的，而且不独占一行。
- 行级块标签
以内容撑开的标签，可以设置宽高,但是不独占一行。
通过css中的display可以改变标签的类型
- inline改变为行级标签
- block改变为块级标签
- inline-block改变为行级块标签
- none直接隐藏掉该标签
注意在html中有div标签(纯净版的块级标签)，span标签(纯净版的行级标签)这两个标签对文本不带任何修饰作用。
盒子模型
- content内容区，可以通过width以及height来设置，也可以直接通过内容撑开。
- padding内边距，需要设置默认是0px
- border边框，需要设置，默认为0px,border-radiues设置圆角
- magin外边距，需要设置,而auto设置该边为最大的，maigin可以设置为负值
注意在盒子模型中，实际大小为内容区+内边距+边框，而外边距主要改变盒子的位置。
p标签默认会有一个16px的外边距。多个标签的外边距会重合(即外边距是标签到标签的距离，不是标签都外边距的距离)
*{
margin: 0;
padding: 0;
}
注意当设置以上的外边距和内边距之后，有时候会出现某些行级块标签中的align属性不可用(失效)，这时候就需要用style中的margin:auto来进行居中处理
- 在设置文本时可以通过设置父级内边距、行高来使文本居中。
- 图片时我们可以设置这些的外边距来使其居中；还可以将图片设置为背景:不重复，设置父级标签的内边距。
浮动
- 任何标签都能浮动起来，但是块级标签浮动后按内容大小分配空间
- 当外标签没有内容时，浮动起来的东西不占其外标签的空间。
浮动的问题:
- 高度塌陷 ： 浮动元素没有撑开底层标签的空间
1、可以设置底层标签的空间大小
2、清除浮动，会自动撑开底层标签的高度 style=“clear: left” - 字体居中
1、可以通过设置内边距(注意内边距需要计算，因为内边距也是计算在内容大小的)
2、可以设置字体行高(设置高度为外标签的高度)
定位
定位会覆盖掉底层标签的内容。而浮动时(没有设置高或清除浮动时)底层标签的内容会环绕在浮动标签的周围。(定位和浮动都会提升一个层面)
相对定位relative
- 当开启了标签的相对定位以后，而不设置偏移量是，标签不会发生任何变化
- 相对定位是相对于标签在文档流中原来的位置进行定位
- 相对定位不会脱离文档流
- 相对定位的位置改变后不释放原来位置的空间
- 相对定位会使标签提升一个层面，但是不会改变标签性质。
- 如果相对定位移到别的标签上，会覆盖别的标签的内容
绝对定位absolute
- 开启绝对定位之后，标签会浮起来，脱离原来的文档流
- 绝对定位会使标签提升一个层级，改变标签的性质，行级标签变为块标签。
固定定位fixed
- 将某些标签固定在某些位置(如：返回顶部)
<!-- 定义顶部锚点 -->
<a name="top"></a>
<!-- 页面末尾返回锚点 -->
<a href="#top" style="position: fixed;right: 10px;bottom: 10px;">返回顶部</a>
案例：添加轮播图片上的箭头(绝对定位必须有参考系)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮播</title>
<style type="text/css">
.body_photo{
width: 256px;
height: 256px;
display: block;
margin: auto;
/* 父级标签开启相对定位 */
position: relative;
}
.body_left_btn,.body_right_btn{
width: 30px;
height: 30px;
border-radius: 30px;
background-color: #808080;
text-align: center;
line-height: 30px;
opacity: 0.5;
color: white;
/* 开启绝对定位 */
position: absolute;
top: 128px;
}
.body_right_btn{
right: 0px;
}
</style>
</head>
<body>
<div class="body_photo">
<img src="../img/1.png" /><!-- 256*256 -->
<div class="body_left_btn"> < </div>
<div class="body_right_btn"> > </div>
</div>
</body>
</html>
效果图
1.png图片
3115
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
