本文深入讲解CSS的基本概念，包括三种引入方式、选择器类型及其优先级、常见属性如颜色、背景、字体、边框等，以及内外间距和盒子模型的详细说明。
CSS（Cascading Style Sheets）基本样式
一、CSS简介
1.什么是css
重叠样式表：主要是负责标签的样式 美化页面
一个网页分三大部分：
结构层： 主要由html负责 负责页面的结构
表现层： 主要由css负责 页面的展示样式 美化页面
行为层： 主要由js负责 负责页面和用户的交互效果
css是单独的一种文件类型 后缀为.css的文件
2.Css的三种引入方式
行间样式：给标签添加style属性 值就是你要设置的css样式
嵌入式：将css代码写在 head标签内的style标签内
外链式：在head标签内通过link标签的href属性引入外部css文件
css语法格式：
3.Css选择器
用来选取要设置的html标签：
标签选择器：通过标签名来查找元素
选择符： 标签名
影响范围最大 一般很少单独使用
id选择器：通过标签的id属性的值来获取元素
选择符 #
id属性的值不能重复 ，一个id值在一个html文件中只能出现一次
影响范围最小
class选择器：通过元素的class属性的值 来获取元素
选择符：
一个标签的class属性可以有多个值
一个class属性的值可以被多个标签去使用
影响范围介于id选择器和标签选择器之间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css三种基本选择器</title>
<style type="text/css">
/*标签选择器*/
/*div{
width: 200px;
height: 200px;
background-color: pink;
}*/
/*id选择器*/
#item1{
width: 200px;
height: 200px;
background-color: pink;
}
/*class选择器*/
.box{
width: 200px;
height: 200px;
background-color: blue;
}
.box1{
border:3px solid black;
}
</style>
</head>
<body>
<div class="box box1">1</div>
<div id="item1">2</div>
<div class="box">3</div>
</body>
</html>
4.引入方式的css优先级
嵌入式
外链式
行间样式
问题：当使用以上三种方式对一个标签设置样式时，思考到底哪个生效
谁靠近元素越近 谁生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>优先级</title>
<link rel="stylesheet" type="text/css" href="./css/4.css">
<style>
div{
width: 100px;
height:100px;
background-color: green;
}
</style>
</head>
<body>
<!-- 谁离得最近，先用谁 -->
<div></div>
<!-- <div style="width: 150px; height: 150px;background-color: red"></div> -->
</body>
</html>
5.三种基本选择器的优先级
标签选择器 < 类选择器 < id选择器
谁的影响范围大谁的优先级就小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器优先级</title>
<style type="text/css">
/*id选择器>类选择器>标签选择器
谁的影响范围越大，优先级越小*/
#item{
width: 200px;
height: 200px;
background-color: blue;
}
.box{
width: 150px;
height: 150px;
background-color: red;
}
div{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box" id="item"></div>
</body>
</html>
6.关系选择器
后代选择器：选择符 空格
选择指定标签内的 所有符合要求的标签 忽略层级关系
子元素选择器：选择符 >
只获取指定元素的直接子元素
并集选择器（组选择器/并列选择器）：
选择符：一次性给多个元素设置相同的样式
伪类选择器：hover
当鼠标移入指定元素时，修改当前元素的样式
伪元素选择器：
after 在指定元素内部的后面插入指定的内容
before 在指定元素的内部前面插入指定的内容
以上两个选择器要配合content使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*后代选择器
设置.warp内所有p标签的样式
*/
.wrap p{
color: red;
}
/*子选择器
设置.warp的子元素p样式
*/
.wrap>p{
color: blue;
}
/*并集选择器
要求：给wrap的子元素span和最外面的span标签设置 字体颜色为粉色*/
.wrap>span,span{
color: pink;
}
/*伪元素选择器hover*/
.box{
width: 100px;
height: 100px;
/*使用英语单词表示*/
/*background-color: red;*/
/*十六进制表示*/
/*background-color: #ff0000;*/
/*background-color: #00ff00;*/
/*background-color: #0000ff;*/
/*简写 ，每两个一组，代表红绿蓝*/
/*background-color: #0ff;*/
/*十进制表示*/
/*background-color: rgb(255,255,0);*/
/*带透明度*/
background-color: rgba(255,0,0,.5);
}
.box:hover{
width: 200px;
height: 200px;
background-color: pink;
color: green
}
/*在box内部的前面插入一个字符‘你’*/
.box:before{
content: '你';
}
/*在box内部的后面插入一个字符‘？’*/
.box:after{
content: '?';
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">
<p>我是inner里的p</p>
</div>
<p>我是wrap内的p</p>
<span>我是wrap内的span</span>
</div>
<p>我是最外层的p</p>
<span>我是最外面的span</span>
<div class="box">
试一试
</div>
</body>
</html>
二、css常用的属性
1.css颜色的表示方式
（1）直接使用单词来表示
（2）十六进制表示方式：取值范围0-9 A-F（或a-f）
一共有六位十六进制数 来表示最终显示的颜色
每两个数为一组 分别代表 红 绿 蓝
（3）十进制数表示方式：:由三个进制的数字 来表示最终的显示颜色 0-255
rgb(红色,绿色,蓝色)
（4）带透明度的颜色表示
rgba(红色,绿色,蓝色,透明度)
0-1之间的小数
2.背景属性
background-color
background-image
background-position
background-repeat
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background</title>
<style type="text/css">
.box{
width: 400px;
height: 400px;
border:1px solid red;
/*图片地址*/
/*background-image: url(./img/1.jpg);
/*不平铺*/
/*background-repeat: no-repeat;*/
/*图片位置，以左上角为准*/
/*background-position: 100px 100px;*/
/*简写*/
background:url(./img/1.jpg) no-repeat 100px 100px;
background-size: 100px 100px;
}
.box1{
width: 50px;
height: 50px;
border: 1px solid red;
background:url(./img/0.jpg) no-repeat -4px -104px;
}
.box1:hover{
width: 50px;
height: 50px;
border: 1px solid red;
background:url(./img/0.jpg) no-repeat -343px -271px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
</html>
3.字体属性
color 颜色
font-size 大小
浏览器的默认字体大小是16px
谷歌浏览器最小只能设置到12px
font-weight 是否加粗
bold/800
font-family 字体类型
如果用户电脑没有指定的字体会使用默认字体显示
font-family:宋体,楷体; 如果第一个字体不存在会去使用第二个字体
font-family: ‘Angsana New’; 如果字体的名字中有空格需要加引号
font-style 是否倾斜
nomal 不倾斜
italic 倾斜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体</title>
<style type="text/css">
/*默认字体大小*/
.box{
font-size: 50px;
font-weight: bold;
/*注意 你所使用的字体 用户的电脑上要有，如果没有会以默认字体显示*/
/*第一个有就显示，没有显示第二个*/
font-family: 楷体, 微软雅黑;
}
em{
font-style: normal
}
</style>
</head>
<body>
<div class="box">
大海，全是水
</div>
<em>斜体</em>
</body>
</html>
4.边框属性
border-top:
border-left:
border-right:
border-bottom:
边框的颜色 边框的样式 边框粗细
边框样式：solid实线 dotted点状线 dashed虚线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体</title>
<style type="text/css">
.item1{
width: 200px;
height: 200px;
/*简写 设置西边边框的粗细 设置边框的样式 设置边框的颜色*/
/*border: 1px solid red*/
border-top: 10px groove red;
/*dotted 点状虚线*/
border-bottom: 3px dotted pink;
/*虚线*/
border-right: 3px dashed #0f0;
border-left: 3px solid blue;
}
</style>
</head>
<body>
<div class="item1"></div>
</body>
</html>
5.内间距
设置元素边界距离内部内容之间的间距
会改变元素的实际大小
padding-top:20px;
padding-left:20px;
padding-right:20px;
padding-bottom:20px;
简写
如果只给一个值代表四边的间距
如果是四个值 从上开始 依次顺时针旋转 每个值代表一个边
如果三个值 第一个值是上 第二个值是左右 第三个值是下
如果是两个值 第一个值是上下 第二个值是左右的
padding:50px;
padding:10px 20px 30px 40px;
padding:10px 20px 30px;
padding:20px 50px;
6.外间距
设置元素距离四周外部元素之间的间距
margin:
margin的使用和padding是一样的可以单独指定方向设置
还可以不指定方向一次设置多个值
一般情况下 我们用margin来去实现块元素的 水平居中
内外间距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内外间距</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background: #0f0;
/*padding-top: 20px;
padding-left: 20px;
padding-right:20px;
padding-bottom:20px;*/
/*简写
如果给一个值带边四边的边距*/
/*padding:50px;*/
/*如果是四个值 从上开始 顺时针旋转*/
/*padding: 10px 20px 30px 40px;*/
/*如果是三个值 ，第一个值是上，第二个值是左右，第三个值是下*/
padding:10px 20px 30px;
/*如果是两个值，第一个值是上下，第二个值是左右*/
/*padding:10px 20px;*/
}
.item2, .item3{
width: 100px;
height: 100px;
}
.item2{
border:1px solid red;
margin: 20px 20px;
}
.item3{
border:1px solid green;
margin: 20px 20px;
}
/*设置item4水平居中*/
.item4{
width: 200px;
height: 200px;
border: 1px solid red;
margin:0 auto;
}
/*margin 为负值 边框合并*/
.item5,.item6{
width: 200px;
height: 200px;
border:5px solid red;
}
.item6{
margin-top: -5px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
<div class="item5"></div>
<div class="item6"></div>
</body>
</html>
7.盒子模型
使用现实中的盒子来描述页面中的元素的 属性
盒子的实际宽度=width+左border+右border+左padding+右padding
盒子的实际高度=height+上border+下border+上padding+下padding
box-sizing:border-box 让盒子大小=css样式的实际大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style type="text/css">
*{
margin: 0;padding: 0;
}
.box1{
width: 100px;
height: 100px;
background: yellow;
}
.box2{
width: 100px;
height: 100px;
background: yellow;
border:20px solid #000;
/*让盒子的实际大小=css设置的实际大小*/
box-sizing: border-box;
}
.box3{
width: 100px;
height: 100px;
background: yellow;
border:20px solid #000;
padding: 20px;
box-sizing: border-box;
}
.box4{
/*要求元素大小为100*100
边框20
padding 20*/
width: 20px;
height: 20px;
background: yellow;
border:20px solid #000;
padding: 20px;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</body>
</html>
扫一扫
556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
