CSS
2020-01-15 11:27
1876 查看
什么是CSS？
- CSS：Cascading StyleSheet 层叠样式表，用于控制网页的样式和布局
CSS的创建
- 内联样式：直接在需要样式的标签中书写css语句
<p style="color: aqua"> 把css语句写在所需要的标签中，这是css的第一种方式 </p>
- 内部样式表：把css语句写在style标签中，并把style标签存储在head标签中，这样做的优势是可以批量操作，而且更规范
<style>
p{
color: black;
}
</style>
- 外部样式表(推荐使用)：把css语句单独写在一个.css文件中，然后需要调用的文件使用即可
<link rel="stylesheet" href="MyCss01.css"> /*此时link标签不能写在style标签中*/
- 三种书写方式的优先级：遵循就近原则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
color: orange;
}
</style>
<!--MyCss01.css中字体的颜色为black-->
<link rel="stylesheet" href="MyCss01.css">
</head>
<body>
<div>
</div>
<div>
<p style="color: aqua">
把css语句写在所需要的标签中，这是css的第一种方式
</p></div>
</body>
</html>
程序结果：
标签选择器
- 对某一类相同的标签进行操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color: #a13d30;
background: #3cbda6;
border-radius: 24px;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>哈</h1>
<h1>哈哈</h1>
<p>哈哈哈</p>
</body>
</html>
id选择器
- 通俗地讲就是给需要添加css语句的标签设置一个id，也就是只能给一个标签使用。注意该id号不能为数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#first{/* 使用#加id名来确定id*/
font-size: 30px;/*设置字体大小*/
color: orange;/*设置字体颜色*/
background: aquamarine;/*设置背景颜色*/
}
</style>
</head>
<body>
<div>
<p id="first">
使用id选择器
</p>
</div>
</body>
</html>
class选择器
- 通俗地讲就是给某个自定义类的标签添加css语句，那么就可以给多个不同的标签使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#first{
font-size: 30px;/*设置字体大小*/
color: orange;/*设置字体颜色*/
background: aquamarine;/*设置背景颜色*/
}
.a{
color: blue;
background: chartreuse;
}
</style>
</head>
<body>
<div>
<p class="a" id="first">
使用id选择器
</p>
<p class="a">
使用class选择器
</p>
<h1 class="a">
使用class选择器
</h1>
</div>
</body>
</html>
程序结果：
- id选择器的优先级大于class选择器
层次选择器
- 后代选择器：某个标签里面的所有标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div p{/*div中所有的p为red*/
color: red;
}
div > p{/*div中的子一代p字体大小为20px*/
font-size: 20px;
}
.a + p{/*aclass的相邻兄弟，只有一个*/
color: chartreuse;
}
.a ~ p{/*aclass下的所有兄弟元素*/
color: #986b0d;
}
</style>
</head>
<body>
<div>
<p class="a">
111
</p>
<p>
222
</p>
<p>
2223
</p>
<ur>
<li>
<p>333</p>
</li>
<li>
<p>
444
</p>
</li>
</ur>
</div>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p[class=name1]{/*属性名称为name1的标签*/
color: chartreuse;
}
</style>
------------------------
<style>
p[class^=name]{/*属性名称为name开头的标签*/
color: chartreuse;
}
</style>
------------------------
<style>
p[class$=e]{/*属性名称为e结尾的标签*/
color: chartreuse;
}
</style>
------------------------
<style>
p[class*=e]{/*属性中含有e的标签*/
color: chartreuse;
}
</style>
</head>
<body>
<div>
<div>
<p class="name1">
雷军
</p>
<p class="name2">
黄章
</p>
<p class="name3">
马云
</p>
<p class="name">
马化腾
</p>
</div>
</div>
</body>
</html>
结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:nth-child(1){/*p标签作为父类的第一个孩子*/
color: red;
}
p:nth-child(2){/*p标签作为父类的第二个孩子*/
color: green;
}
p:nth-of-type(3){/*与p标签同类的第三个元素*/
color: blue;
}
</style>
</head>
<body>
<div>
<p>111</p>
<p>222</p>
<p>333</p>
<ur>
<li><p>444</p></li>
<li><p>555</p></li>
<li><p>666</p></li>
</ur>
</div>
</body>
</html>
美化网页的元素
- span标签：把需要突出的内容放在span标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div p:nth-of-type(1){
font-size: 10px;
}
.a{
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<div>
<p >
这是 <span class="a">第一次</span>学习java
</p>
</div>
</body>
</html>
- 字体样式 font-size：字体大小
- font-family：字体大小
- font-weight：字体粗细
- color：字体颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
font-size: 20px;
font-family: 楷体;
font-weight: bolder;
color: #986b0d;
}
</style>
</head>
<body>
<div>
<p>哈哈哈哈哈哈哈</p>
</div>
</body>
</html>
- 文本样式 颜色：color、rgb、rgba
- 对齐方式：text-align
- 首行缩进：text-indent
- 行高：line-height
- 阴影：text-shadow
- 装饰：text-decoration(下划线、上划线、中划线等等)
- 文本图片水平对齐： vertical-align: middle
<style>
h1{
color: rgb(0,0,0);
text-indent: 3em;
text-decoration: line-through;
}
p{
line-height: 20px;
text-align: center;
text-decoration: underline;
vertical-align: middle;
}
</style>
- 超链接伪类
a:hover{
color: red;
}
鼠标防止在a标签上时，颜色会变为red
- 列表 使用ur和li标签
- list-style：修改列表元素的样式
li{
list-style: none;
/*none:没有样式
circle：空心圆
decimal 数字
square 正方形
*/
}
- 背景图片
div{
background: url("../../statics/img/logo.png");
background-repeat: repeat-x;/*x轴重复*/
background-repeat: repeat-y;/*y轴重复*/
background-repeat: no-repeat;/*只出现一次*/
}
盒子模型
- CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
- margin：外边距
- border：边框
- padding：内边距，边框和内容区的距离
<style>
#nav{
border:1px solid red;
width: 300px;
height: 200px;
}
h1{
color: white;
background-color: aquamarine;
font-size: 20px;
margin: 0px ;
padding: 10px ;
}
div > p{
background-color: aquamarine;
}
input{
background-color: #986b0d;
}
</style>
- 圆角边框：border-radius
浮动
- 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- display 块级元素block：独占一行
- 行内元素inline：不独占一行 行内元素可以被包含在块级元素中
- 块元素inline-block：可以内联在一行
<style>
div{
border: red 1px solid;
width: 200px;
height: 200px;
display: block;
}
span{
border: green 2px solid;
width: 100px;
height: 100px;
display: inline;
}
- float float标签可以实现元素的左右移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
float: left;
display: block;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
float: right;
}
</style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>
文档流
- 文档流是指元素在排版过程中，会自动设置格式为自左向右，自上而下的形式。
- 父级边框塌陷：由于元素可以左右浮动，那么有可能这些元素将不会受父级边框的限制，元素在边框外显示了，如图所示
解决父级边框塌陷问题的方法
- clear 清除指定位置的浮动元素
clear: right; 右侧不允许有浮动元素 clear: left; 左侧不允许有浮动元素 clear: both; 两侧不允许有浮动元素 clear: none;
- 给父级边框增加高度height，这样父级边框有足够大的容量来存储元素
#father {
border:1px #000 solid;
height: 500px;
}
- 增加一个空的div，清除这个div中的浮动，并且设置内外边距为0
<div class="a"></div>
.a{
clear: both;
margin: 0;
padding: 0;
}
- 在父级边框中使用overflow的hidden属性，可以把超出父级边框范围的元素隐藏起来
#father {
border:1px #000 solid;
overflow: hidden;
}
- 使用父级元素的伪类after(推荐使用)
#father:after{
content: '';
display: block;
clear: both;
}
定位
相对定位
- 相对定位使用关键字relative及其属性top、bottom、left、right进行具体的操作
- 需要注意的是，相对定位是相对于自己原来的位置进行移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#father{
border: 1px red solid;
margin: 0;
padding: 0;
}
.a{
position: relative;
top: 30px;
left: 50px;
/*相对于原来的位置向下移动30px，向右移动50px*/
}
.b{
position: relative;
bottom: 20px;
right: 20px;
/*相对于原来的位置向上移动20px，向左移动20px*/
}
.c{
position: relative;
top: -20px;
left: -20px;
/*相对于原来的位置向上移动20px，向左移动20px*/
}
</style>
</head>
<body>
<div id="father">
<div class="a"> <p>哈哈</p></div>
<div class="b"> <p>哈哈哈哈</p></div>
<div class="c"> <p>哈哈哈哈哈哈</p></div>
</div>
</body>
</html>
- 练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
/*先设置父边框的大小*/
border: 1px red solid;
width: 305px;
height: 305px;
margin: 0;
padding: 10px;
}
a{
background-color: hotpink;
line-height: 100px;
text-align: center;
display: block;
width: 100px;
height: 100px;
text-decoration: none;
}
a:hover{
background-color: blue;
}
.a2{
position: relative;
left: 200px;
top: -100px;
}
.a5{
position: relative;
left: 100px;
bottom: 300px;
}
.a3{
position: relative;
}
.a4{
position: relative;
left: 200px;
bottom: 100px;
}
</style>
</head>
<body>
<div id="box">
<a class="a1" href="#">链接1</a>
<a class="a2" href="#">链接2</a>
<a class="a3" href="#">链接3</a>
<a class="a4" href="#">链接4</a>
<a class="a5" href="#">链接5</a>
</div>
</body>
</html>
绝对定位
- 相对于浏览器或者父级标签所在的位置进行移动
#father{
border: 1px red solid;
padding: 0;
margin: 0;
}
.a{
position: absolute;
left: 100px;
}
相对于父级边框像左移动100px
固定定位
- 相对于浏览器窗口进行移动
.a{
position: fixed;
left: 100px;
}
- 点赞
- 收藏
- 分享
- 文章举报
Henry哼哼哼
发布了43 篇原创文章 · 获赞 0 · 访问量 501
私信
关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS中提升优先级属性!important的用法总结
- 纯css来改变下拉列表框的样式。
- CSS中块元素和内联元素的区别
- 推荐20款最新的超棒CSS技术教程
- 你应该知道的一些事情——CSS权重
- js加css实现div展示更多隐藏内容
- CSS教程 CSS选择器
- css(二)
- 更愉快的书写CSS
- CSS学习笔记：2 语法
- 关于Theme中.skin与css需要理清的关系
- css 三种方式
- CSS——display显示属性
- JS+css滑动菜单简单实现
- IE6的那些css常见bug（汇总）
- 辛星和您一起用纯CSS美化面包屑导航
- opacity--css + javascript兼容性代码
- Html+css让div块垂直水平居中
- CSS 选择器 (1、2、3 )
- CSS 文本属性text 常用简介