CSS基础知识
基础
简介
-
CSS (Cascading Style Sheets)[层叠样式表]
-
CSS可以同时控制多张网页的布局
-
样式表可以写在 行内、头部或css文件
行内样式
使用：
<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
<div style="background-color:red;color:#fff;">行内样式</div>
</body>
</html>
头部样式
使用：
<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
<style>
#head{
background-color:red;
color:#fff;
}
</style>
</head>
<body>
<div id="head">头部样式</div>
</body>
</html>
外部引入样式
使用：
index.html
<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
<!-- index.html和index.css在同一个文件夹 -->
<link rel="stylesheet" href="./index.css" type="text/css" >
</head>
<body>
<div id="outside">引入外部样式</div>
</body>
</html>
index.css
#outside{
background-color:red;
color:#fff;
}
CSS语法
CSS语法的构成:
选择器{属性: 值; }
例：
#outside{color:#fff;}
ps: 行内样式只需要属性和值
CSS选择器
通用选择器
选取所有元素
基本使用：
* {
color: red;
}
元素选择器(分组选择器)
直接选取元素，设置属于该元素名的样式
基本使用：
p {
color: red; /* 所有的p标签里面的字体颜色为:red */
}
基础选择器
根据名id、类名来选取元素
注意：id具有唯一性且一个文档里面不可重复使用，类名可以重复使用
基本使用：
#id {
color: red; /* 只有唯一id里面的字体颜色为:red */
}
.class {
color: red; /* 所有的叫class的类名里面的字体颜色为:red */
}
组合器选择器
根据它们之间的特定关系来选取元素
基本使用：
p.class {
color: red; /* 所有p标签下面类名叫class的元素里面的字体颜色为:red */
}
伪类选择器
根据特定状态选取元素
基本使用：
a:link { /* 未访问的链接 */
color: red;
}
a:hover { /* 鼠标悬停链接 */
color: red;
}
a:visited { /* 已访问的链接 */
color: red;
}
a:active { /* 已选择的链接 */
color: red;
}
伪元素选择器
根据特定状态选取元素
使用规则：
p::after 在每个 <p> 元素之后插入内容。
p::before 在每个 <p> 元素之前插入内容。
p::first-letter 选择每个 <p> 元素的首字母。
p::first-line 选择每个 <p> 元素的首行。
p::selection 选择用户选择的元素部分。
属性选择器
根据属性或属性值来选取元素
基本使用：
div,span{
color: red; /* 所有的div标签和span标签里面的字体颜色为：red */
}
盒模型
PS
希望大家都可以找到在工作中的乐趣。
热爱前端技术。
新手交流点这里 -->有兴趣一起摸鱼的点击这里
