本文介绍了CSS的基础知识，包括CSS的作用、基础语法，如行内样式、内部样式和外部样式引入，以及选择器的概念，如ID选择器、类选择器和标签选择器。此外，还讲解了CSS中的常用样式，如字体和文本属性、背景属性、显示属性、浮动属性和盒子模型，这些都是网页设计中的重要概念。
目录
1CSS概述
层叠样式表（Cascading Style Sheet） : 样式, 风格 style 样式其实就是页面展示效果。
作用：美化页面
1. 实现了样式和内容的分离，提高了显示效果和样式的复用性。
2. 降低耦合性，分工更加明确，CSS专门用于美化，HTML专门用于结构搭建。
2CSS基础语法
2.1引入CSS
三种方式：
1.行内样式 在每一个标签的内部，书写style属性
语法:<标签 style="属性样式名称:属性样式值;属性样式名称:属性样式值;"></标签>
在css中单位不可以省略
<span style="color: red;font-size:20px ;">样式名多个单词用横杠分割</span><br/>
2.内部样式 在一个页面中可以共享css样式,一般情况下在head标签书写style标签。
语法:
<style> 内部样式
选择器{
属性样式名称:属性样式值; css样式
属性样式名称:属性样式值;
}
</style>
选择器: 获得页面元素
3.外部样式 当多个页面使用同样的样式时候, 抽取一个css文件，在文件的内部书写样式 ,直接写入css样式即可
span{
color: blue;
font-size:20px ;
font-family: "Times New Roman";
}
引入外部样式
<link rel="stylesheet" href="" type="text/css" />
link: 快捷方式 链接
rel="stylesheet" rel : 引入的内容是样式表
type="text/css" 类型是: 所有的文本都是css内容
href="" 引入的链接文件位置
2.2基本选择器
选择器:定位到要修饰的标签(元素)
选择器: 用来获得页面标签 定位页面标签
基本选择器:
id选择器: 要求页面上的标签有id属性（唯一标识），id在页面中必须唯一
一般情况下修改一个标签的属性
语法:
#id名称{ 样式 }-------------------------------------------------------------------------------------------------------------------------
class选择器: 要求页面上的标签有class属性，每个标签都有class，class可以重名,可以有多个,使用空格分隔。
表示一组标签(自定义的一组标签)
语法:
.class名称{ 样式 }-------------------------------------------------------------------------------------------------------------------------
标签选择器 , 使用的是标签的名称表示一组标签( 官方规定的 预定义 )
语法:
标签的名称{ 样式 }
如果多个选择器同时作用于一个标签的情况下 , 范围越小 优先级越高
id> class>标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<style>
/*id选择器*/
#boss{
color: orange;
}
/*class选择器*/
.female{
color: blue;
}
/*标签选择器*/
span{
color: red;
}
</style>
</head>
<body>
<span class="female">古力娜扎</span>
<span class="female">迪丽热巴</span>
<span class="female hero">黑寡妇</span>
<span class="male hero">钢铁侠</span>
<span class="male hero">超人</span>
<span id="boss" class="female">灭霸</span>
</body>
</html>2.3扩展选择器
子代选择器:最终只是给子代加样式
父选择器>子选择器
后代选择器:给后代加样式
父选择器 后代选择器
并列选择器:多个选择器使用同样的样式
选择器1,选择器2
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>04-扩展选择器</title>
<style>
/*并列选择器*/
span,label,input{
color:red;
}
/*子代选择器*/
div>span{
border: 1px solid red;
}
/*后代选择器*/
div span{
background-color: yellow;
}
</style>
</head>
<body>
<div>
<span>烟幕弹</span>
<p>
<span id="gbl">高爆雷</span>
</p>
</div>
<span id="jjx">急救箱</span>
<br/>
<label>姓名</label>
<input type="text" name="username" value="Jack"/><br/>
<label>密码</label>
<input type="password" name="password" value="123456"/><br/>
</body>
</html>3CSS常用样式
3.1字体和文本属性
文本属性:设置文本的颜色,行高,缩进,间距,文本的修饰(有无下划线)等
字体属性:设置文字的大小,字体,风格(倾斜),是否加粗
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字体和文本属性</title>
<style>
/*
渲染需求
1.p段落文字绿色
2.p段落文字大小20px
3.p段落行高40px
4.p段落字体加粗
5.p段落字体楷体
6.p段落文字倾斜
7.超链接隐藏下划线
*/
p{
color:green;
line-height: 40px;
font-size: 20px;
font-weight: bold;
font-style: italic;
font-family: 楷体;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<div>
<a href="#"> 学习的误区：</a><br/>
<p>
眼睛：看了一遍记住了<br/>
耳朵：听了一遍明白了<br/>
脑子：想了一遍搞懂了<br/>
手：你们会个屁！^_^ <br>
</p>
</div>
</body>
</html>3.2背景属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>背景属性</title>
<style>
div{
width: 100%;
height: 200px;
border: 1px solid red;
}
#div1{
background-color: yellow;
}
#div2{
background-image: url("../img/girl.jpg");
background-repeat: no-repeat;/*是否重复*/
background-position: top center;/*图片显示的位置*/
background-color: #a6a6a6;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>3.3显示属性
行级标签和块级标签
如何区分: 换行(块级)或者不换行(行级)
display:
block: 表示当前元素为块级标签
inline : 表示当前元素为行内标签
以上两个属性 可以切换 标签的格式(没意义)
none : 隐藏页面属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>显示属性</title>
<style>
div,span{
border: 1px solid red;
}
</style>
</head>
<body>
<span style="display: none;">内联标签span1</span>
<span style="display: block;">内联标签span2</span>
<span style="display: block;">内联标签span3</span>
<div style="display: inline;">块级标签div1</div>
<div style="display: none;">块级标签div2</div>
<div style="display: inline;">块级标签div3</div>
</body>
</html>3.4浮动属性
float: 浮动 将div修改原本的位置
left 左浮动
right 右浮动
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>浮动属性</title>
<style>
.box{
width: 150px;
height: 150px;
border: 1px solid red;
text-align: center;
float: right;
}
</style>
</head>
<body>
<div class="box" id="long">左青龙</div>
<div class="box" id="hu">右白虎</div>
<div class="box">最后砍成米老鼠</div>
</body>
</html>3.5盒子模型
布局使用，规定元素和元素之间的距离,规定元素和边框之间的距离。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
<!--
外边距(当前标签和另外一个标签的外边距的距离)
边框
内边距(内容和边框之间的距离)
元素内容
-->
img{
border: 2px solid red;
padding:20px;
/*padding: 20px 10px 5px 0px;*//*上右下左*/
margin: 30px;
}
</style>
</head>
<body>
<div class="box">
<img src="../img/girl.jpg" width="300px" height="300px" alt="">
<img src="../img/girl.jpg" width="300px" height="300px" alt="">
</div>
</body>
</html>
以上就是部分CSS的知识点啦，后续会继续补充。各位大佬如发现有知识点错误或者有不同的建议与意见，欢迎评论、私信指正，本人才疏学浅还需向各位大佬学习，还请不吝赐教！在此感谢各位的观看！谢谢！
扫一扫
1458
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
