CSS 从零快速入门到快速使用
文章目录
- CSS
- 什么是 CSS
- CSS 发展史
- CSS 快速入门
- CSS 导入方式
- CSS选择器
- 基本选择器
- 层次选择器
- 结构伪类选择器
- 属性选择器
- CSS 样式
- 背景样式
- 文本属性
- 字体属性
- 超链接伪类
- 列表属性(list)
- 盒子模型
CSS
什么是 CSS
Cascading Style Sheets 层叠样式表 ,它用于设置页面的表现。
层叠：多个样式可以作用在同一个html的元素上，同时生效
- 降低耦合度。解耦
- 让分工协作更容易
- 提高开发效率
CSS 发展史
- CSS 1.0
- CSS 2.0 DIV 块 + CSS ，HTML 与 CSS 结构分离 SEO
- CSS 2.1 浮动定位
- CSS 3.0 圆角，阴影，动画
CSS 快速入门
先编写一个标准 helloword 修饰
<html>
<head>
<meta charset="utf-8">
<title>01-快速入门title>
head>
<style>
h1{
color: red;
}
style>
<body>
<h1> hello wordh1>
body>
html>
css 基本格式
CSS 是对 html 的内容进行渲染，如果不知道 html 可以看上期文章快速入门 html
CSS 导入方式
上面的 helloword 程序是使用基本在html 内部使用 css ，但是对于代码比较过在内部写就比较杂乱
下面介绍四种导入方式
-
link 外部样式
<link rel="stylesheet" href="css/style.css"> -
内部样式
<style> h1{ color: red; } style> -
行内样式
<h1 style="color: red;"> hello wordh1> -
import 样式
<style> @import url("css/style.css"); style>
import 和 link 外部样式区别
- import 样式导入会在dom结构加载完成后才进行渲染（老的网站有时网络不好时会出现一个骨架等一会才有对应的渲染），link是和dom一起加载渲染
- import 是2.1的只有 ie6以上才能使用，link 是 xhtml 标签兼容任何 ie
CSS 选择器
基本语法
css语法：
* 格式：
选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}
* 选择器:筛选具有相似特征的元素
* 注意：
* 每一对属性需要使用；隔开，最后一对属性可以不加；
作用是为了选择页面上的某一个或者某一类元素
CSS选择器
基本选择器
1、标签选择器
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<style>
h1{
color: #801363;
}
p{
color: #008000;
}
style>
<body>
<h1>学习1h1>
<h1>学习2h1>
<p>学习3p>
body>
html>
2、类选择器
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<style>
.h1{
color: greenyellow;
}
style>
<body>
<h1 class="h1">学习1h1>
<h1 class="h1">学习2h1>
<h1 class="h2">学习3h1>
body>
html>
3、id选择器
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<style>
#h1{
color: red;
}
#h3{
color: green;
}
style>
<body>
<h1 id="h1">学习1h1>
<h1 id="h2">学习2h1>
<h1 id="h3">学习3h1>
body>
html>
优先级
id 选择器 > 类选择器 > 标签选择器
层次选择器
- 后代选择器
- 子代选择器
- 相邻兄弟选择器
- 通用兄弟选择器
测试代码
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<style>
/* 后代选择器 */
body p {
background: red;
}
/* 子代选择器 */
body > p{
background: green;
}
/* 相邻兄弟选择器 */
.active + p{
background: yellow;
}
/* 通用兄弟选择器 */
.active~p{
background: blue;
}
style>
<body>
<p>p1p>
<p class="active">p2p>
<p>p3p>
<p>p3p>
<ul>
<li>
<p>p5p>
li>
<li>
<p>p6p>
li>
<li>
<p>p7p>
li>
ul>
<p class="active">p6p>
<p>p7p>
body>
html>
结构伪类选择器
伪类的语法：
selector : pseudo-class {property: value}
CSS 类也可与伪类搭配使用。
selector.class : pseudo-class {property: value}
伪类特殊用法
p:link {color: #FF0000} /* 未访问的链接 */
p:visited {color: #00FF00} /* 已访问的链接 */
p:hover {color: #FF00FF} /* 鼠标移动到链接上 */
p:active {color: #0000FF} /* 选定的链接 */
测试代码
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<style>
/* ul 第一个元素 */
ul li:first-child{
background: red;
}
/* ul 最后一个元素 */
ul li:last-child{
background: yellow;
}
/* 选中父级元素下的第几个元素 */
p:nth-child(2){
background: blue;
}
/* 根据类型选择 */
p:nth-of-type(3){
background: green;
}
p:hover{
background: black;
}
style>
<body>
<h2>h2h2>
<p>p1p>
<p>p2p>
<p>p3p>
<ul>
<li>li1li>
<li>li2li>
<li>li3li>
ul>
body>
html>
属性选择器
属性选择器可以根据元素得属性和属性得值来选择元素
-
简单属性选择：如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
-
根据具体属性值选择：除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。
-
子串匹配属性选择器
[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素 [abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素 [abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素
测试代码
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<style>
.demo a{
float: left;
display: block;
height: 3.125rem;
width: 3.125rem;
background: greenyellow;
text-align: center;
color: red;
text-decoration: none;
margin-right: 0.3125rem;
font: bold 1.25rem/3.125rem arial;
}
/* 存在 id 属性得元素 */
/* a[id] {
background: yellow;
} */
/* 属性名 = 属性值 */
/* a[id=first] {
background: blue;
} */
/* a[class*="links"]{
background: yellow;
} */
/* 选中 href中以http开头得元素 */
a[href^=www]{
background: #801363;
}
a[href$=ad]{
background: #FF0000;
}
style>
<body>
<p class="demo">
<a href="www.baidu.com" class="links item first" id="first">1a>
<a href="" class="links item active" target="_blank" title="test">2a>
<a href="index.html" class="links item">3a>
<a href="" class="links item">4a>
<a href="" class="links item">5a>
<a href="avc" class="links item">6a>
<a href="dsad.doc" class="links item">7a>
<a href="dsad" class="links item">8a>
<a href="/dsad" class="links item">9a>
p>
body>
html>
通配符选择器
<div>
<p>Sample Paragraphp>
<p>Sample Paragraphp>
div>
<style type="text/css">
* {
color: blue;
}
style>
CSS 样式
背景样式
| 属性 | 描述 |
|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明中。 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
| background-color | 设置元素的背景颜色。 |
| background-image | 把图像设置为背景。 |
| background-position | 设置背景图像的起始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
文本属性
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向。 |
| line-height | 设置行高。 |
| letter-spacing | 设置字符间距。 |
| text-align | 对齐元素中的文本。 |
| text-decoration | 向文本添加修饰。 |
| text-indent | 缩进元素中文本的首行。 |
| text-shadow | 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。 |
| text-transform | 控制元素中的字母。 |
| unicode-bidi | 设置文本方向。 |
| word-spacing | 设置字间距。 |
字体属性
| 属性 | 描述 |
|---|---|
| [font] | 简写属性。作用是把所有针对字体的属性设置在一个声明中。 |
| font-family | 设置字体系列。 |
| font-size | 设置字体的尺寸。 |
| font-size-adjust | 当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。） |
| font-stretch | 对字体进行水平拉伸。（CSS2.1 已删除该属性。） |
| font-style | 设置字体风格。 |
| font-variant | 以小型大写字体或者正常字体显示文本。 |
| font-weight | 设置字体的粗细。 |
测试代码：
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<style>
body{
font-family: "arial black", 楷体;
color: #008000;
}
h1{
font-size: 3.125rem;
}
.p1{
font-weight: 900;
}
.p2{
direction: left;
}
.p3{
line-height: 1.25rem;
unicode-bidi: initial;
}
.p4{
text-align: center;
text-shadow: #0000FF;
}
p{
text-indent: 2em;
word-spacing: initial;
}
style>
<body>
<h1>正片剧情h1>
<p class="p1">
拥有财富、名声、权力，这世界上的一切的男人 “海贼王”哥尔·D·罗杰，在被行刑受死之前说了一句话，让全世界的人都涌向了大海。“想要我的宝藏吗？如果想要的话，那就到海上去找吧，我全部都放在那里。”，
世界开始迎接“大海贼时代”的来临 [10] 。
p>
<p class="p2">
时值“大海贼时代”，为了寻找传说中海贼王罗杰所留下的大秘宝“ONE PIECE”，无数海贼扬起旗帜，互相争斗。
p>
<p class="p3">
有一个梦想成为海贼王的少年叫路飞，他因误食“恶魔果实”而成为了橡皮人，在获得超人能力的同时付出了一辈子无法游泳的代价。
p>
<p class="p4">
十年后，路飞为实现与因救他而断臂的香克斯的约定而出海，
他在旅途中不断寻找志同道合的伙伴，开始了以成为海贼王为目标的冒险旅程 [11]
p>
body>
html>
超链接伪类
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<style type="text/css">
a{
text-decoration: none;
color: #000000;
}
a:link{
background-color: yellow;
font-size: 20px;
}
a:visited{
color: greenyellow;
}
a:hover{
color: red;
}
a:active{
color: burlywood;
}
style>
<body>
<p><a href="">码处高效a>p>
<a href="img/a.jpg">a>
body>
html>
列表属性(list)
| 属性 | 描述 |
|---|---|
| list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中。 |
| [list-style-image | 将图象设置为列表项标志。 |
| list-style-positio | 设置列表中列表项标志的位置。 |
| list-style-type | 设置列表项标志的类型。 |
| marker-offset |