文章目录
一、引入CSS样式
CSS的引入方式：
外部样式表
把CSS与HTML单独放在不同文件中，然后在HTML中用link引用CSS文件
<link rel = "stylesheet" type = "text/CSS" href = "文件路径" />
内部样式表
把css与HTML放在同一个文件中，其中CSS放在style标签内。style放在head内
<style type = "text/CSS" >
......
</style>
行内样式表
内部列表的CSS是在标签的style属性内定义的
CSS用/*...*/来注释
这篇博客里面，为了便于展示CSS定义，例子都使用的是内部样式表.
因为我使用的软件原因，px单位都自动帮我换算成rem了。
二、常用选择器
选择器是什么：
（一个样式的语法由三部分组成：选择器、属性、属性值）
用来选择你想要的元素，叫选择器。
CSS中有很多不同的方法来选中你想要的元素，
这些不同的方法就是不同的选择器。
最常用的五种选择器：
id选择器
class选择器
后代选择器
群组选择器
元素选择器
CSS选择器的选择格式：
选择器
{
属性1：取值1；
...
属性n：取值n；
}
id属性
id具有唯一性，也就是说，
在一个页面中相同的id只能出现一次。
但是在不同页面中就没事了。
class属性
可以为同一个页面的相同元素或者不同元素设置相同的class，
然后使相同的class的元素具有相同的css样式
class可以在同一个页面中出现相同的
类比，id相当于身份证号码，class相当于名字，身份证号码每个人一定都不一样，但是不同的人的名字可能相同
1.元素选择器
让选中的元素，在之后所有使用时都表现成这个样式
选中相同的元素，然后对相同的元素定义同一个CSS样式。
语法：选择符{声明：...；声明：...；}
div{width:100px;height:100px}
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<title>CSS</title>
<style type="text/css">
div{color: red;} <!--进行元素选择，样式选择-->
</style>
</head>
<body>
<div>西安电子科技大学</div>
<p>西安电子科技大学</p>
<div>西安电子科技大学</div>
<p>西安电子科技大学</p>
</body>
</html>
2.id选择器
id选择器：
给元素设置一个id属性，然后针对设置了这个id的元素定义CSS样式。
但是注意在同一个页面中不能出现两个相同的id。
语法：
id选择符前缀+ id名称 {属性：属性值；属性：属性值；}
# box{width:100px; height:100px;}
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<title>CSS</title>
<style type="text/css">
#cs{color: red;}
</style>
</head>
<body>
<div id="cs">
<strong>ID选择器</strong>
</div>
</body>
</html>
3.class选择器
class选择器:
也就是“类选择器”，我们可以对相同的元素或者不同的元素设置相同的class属性，
然后针对拥有同一个class属性的元素定义CSS
如果要为两个或者多个元素定义相同的样式，建议使用class选择器。
语法：
class选择符前缀+ class名称 {属性：属性值；属性：属性值；}
. c{width:100px; height:100px}
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<title>CSS</title>
<style type="text/css">
.cla{color: red;}
</style>
</head>
<body>
<p class="cla">这是第一个</p>
<p >这是第二个</p>
<div class="cla">这是第三个</div>
</body>
</html>
4.后代选择器
后代选择器：
选择元素内部中某一种元素的所有元素，包括子元素和其他后代元素。
父元素和后代元素必须用空格隔开，用来表示选中某个元素内部的后代元素。
语法：
#父元素选择 子元素选择{属性：属性值；属性：属性值；}
#father div{width:100px;height:100px;}
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8"/>
<title>CSS</title>
<style type="text/css">
#father1 div{color: red;}
#father2 span{color: blue;}
</style>
</head>
<body>
<div id="father1">
<div >红色</div>
<div><strong>还是红色</strong></div>
</div>
<div id="father2">
<div >黑色</div>
<p>还是黑色</p>
<span><strong>蓝色</strong></span>
</div>
</body>
</html>
5.群组选择器
群组选择器：
同时对几个选择器进行操作。
h3,p{width:100px;height:100px;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div,p{color: red;}
</style>
</head>
<body>
<div >
红色一
</div>
<br />
<p>
RED TWO
</p>
</body>
</html>
群组选择器还能同时结合不同类型的选择器来选择
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<title>CSS</title>
<style>
#i,.j,span{color: red;}
</style>
</head>
<body>
<p id="i">ID选择实现</p>
<p class="j">class选择实现</p>
<span>元素选择器实现</span>
</body>
</html>
选择器完了
三、字体样式
设置字体属性：
font-family 字体类型
font-family:字体1，字体2....；
如果类型名只有一个英文单词，就不用加双引号，其余情况都要加
一次写多个字体：优先从左边字体开始，如果没有使用下一个，以此类推
font-size 字体大小
字体取值有两种：一种是关键字如large、small、medium等
二是像素值：如10px、100px等
px：像素，1像素指的是一张图片中最小的点，或者计算机屏幕中最小的点
px是相对单位，如果屏幕分辨率不同，那么1px表示的大小也是不同的
注意size指的是大小，宽高
font-weight 字体粗细
字体的粗细，与size不同，粗细指的是字体的肥瘦
font-weight的取值有两种：一是 100--900 之间的数值
二是关键字；
normal 正常 --> 400
lighter 较细 --> 100
bold 较粗 -->700
bolder 很粗（其实效果和bold差不多） --> 900
一般只会用到bold，其他几乎用不上
font-style 字体风格
取值有： normal 正常
italic 斜体 只有有这个属性的字体才能用
oblique 斜体 范围广，都能用
一般很少用
color 字体颜色
取值有两种：关键字：blue、red等
十六进制的RGB值，类比C语言中调节字体的颜色
浏览器解析CSS是有一定顺序的，先解析前面的，后解析后面的，后面的会覆盖前面的。
CSS入门中，建议用px做像素单位，之后再学更多的CSS单位
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<title>CSS</title>
<style type="text/css">
#div1{font-family: Arial;font-size: 0.625rem;font-weight: 500;font-style: normal;}
#div2{font-family: "times new roman";font-size: 1rem;font-weight: 700;font-style: oblique;}
#div3{font-family: "微软雅黑";font-size: 1.25rem;font-weight: 900;font-style: italic;}
</style>
</head>
<body>
<div id="div1">致敬HL</div>
<br />
<div id="div2">致敬HL</div>
<br />
<div id="div3">致敬HL</div>
</body>
</html>
四、文本样式
1.常用
文本样式：
与字体样式区别开来，font换成了text
把字体与文本样式区别开，以后写东西时候很容易想起来哪些属性是字体样式那些是文本样式
首行缩进：
text-indent text-indent：像素值；
段落想要缩进两个字的空间，可以把缩进值调成字体值的两倍。
水平对齐：
text-align text-align：取值
他有三个取值：left 左对齐
right 右对齐
center 居中对齐
文本修饰：
text-decoration text-decoration：取值
四个取值：
none 去除所有的划线效果（默认） 可以去除超链接中自动配上的下划线
underline 下划线
line-through 中划线
overline 顶划线
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8"/>
<title>CSS</title>
<style type="text/css">
p{
font-size: 1rem;
text-indent: 1.75rem;
}
#i{
text-align: center;
text-decoration: line-through;
}
#j{
text-align: left;
text-decoration: overline;
}
#o{
text-align: right;
text-decoration: underline;
}
</style>
</head>
<body>
<p id="i">
似水流年才是一个人的一切，其余的不过是片刻的欢愉与不幸。
</p>
<p id="j">
似水流年才是一个人的一切，其余的不过是片刻的欢愉与不幸。
</p>
<p id="o">
似水流年才是一个人的一切，其余的不过是片刻的欢愉与不幸。
</p>
</body>
</html>
2.英文
大小写：
text-transform text-transform: 取值
针对英文进行大小写转换。中文不存在。
四个取值：
none 无转换（默认值）
uppercase 转大写
lowercase 转小写
capitalize 将每个英文单词的首字母转换成大写
<!DOCTYPE >
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS</title>
<style type="text/css">
#first{text-transform: uppercase;}
#second{text-transform: lowercase;}
#third{text-transform: capitalize;}
</style>
</head>
<body>
<p id="first">handsome</p>
<p id="second">HandSome</p>
<p id="third"> i am the most handsome one</p>
</body>
</html>
3.####
行高：
line-height
行高指的是一行的高度
涉及的理论知识很多，也很重要
间距：
letter-spacing 字间距 ：像素值
word-spacing 词间距 ：像素值
一般来说，word-spacing 只针对英文单词
实际开发中用的很少，一般只会用于英文网页
五、边框样式
1.整体样式
边框样式：
边框样式随处可见，几乎所有的元素都可以定义边框。
定义一个边框需要考虑；
border-width 边框的高度
border-style 边框的外观（虚线？实线？）
border-color 边框的颜色
想要为一个元素定义边框，必须要用时设置这三个属性才可以有效果
整体样式：
1、border-width 取值为像素值
2、外观：
取值
none 无样式
dashed 虚线
solid 实线
3、颜色
取值
和那个啥文本样式一样的取值
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<title>CSS</title>
<style type="text/css">
#first{
border-width: 3.125rem;
border-style: solid;
border-color: red;
}
#second{
border-width: 0.625rem;
border-style: dashed;
border-color: purple;
}
</style>
</head>
<body>
<div id="first">
这是第一个边框
</div>
<br />
<div id="second">
这是第二个边框
</div>
</body>
</html>
还可以简写： {border:1px solid red;}
2.局部样式
边框的局部样式：
上边框 border-top
下边框 border-bottom
左边框 border-left
下边框 border-right
例： border-top-width:1px ;
border-right-style:solid ;
border-left:1px solid siliver
但是不管是怎么定义，边框宽度，边框外观，边框颜色都要有
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<title>CSS</title>
<style type="text/css">
#i{
width: 6.25rem;
height: 6.25rem;
border-top: 0.3125rem solid red;
border-bottom: 0.3125rem solid purple;
border-left: 0.3125rem solid blue;
border-right: 0.3125rem solid yellow;
}
div{
width: 6.25rem;
height: 6.25rem;
border: 0.0625rem solid red;
border-bottom: none;
}
</style>
</head>
<body>
<p id="i">
边框
</p>
<div>
第二个边框
</div>
</body>
</html>
六、列表样式
1.列表
列表样式
list-style-type
HTML中可以用type属性在标签内定义列表样式
CSS中 不管是有序还是无序列表，
都是用list-style-type属性来定义
针对ol和ul 不针对li
语法：
list-style-type:取值
取值：
decimal 阿拉伯数字
lower-roman 小写罗马数字
upper-roman 大写罗马数字
lower-alpha 小写英文
upper-alpha 大写英文
disc 实心圆
circle 空心圆
square 正方形
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<title>CSS </title>
<style type="text/css">
#i{list-style-type: lower-roman;
color: red;
}
</style>
</head>
<body>
<div id="i">
<caption>有序列表</caption>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
</div>
<div>
<ul type="square">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</div>
</body>
</html>
2.自定义序列项图标
由于列表符号不太美观，因此在实际开发中，大多数情况下要使用
list-style-type:none
将其消除掉
列表自身的列表项符号不好看，可以自定义。
语法：
list-style-image: url(图片路径)
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<title>CSS </title>
<style type="text/css">
ol{list-style-image:url(../image/神龙至尊.jpg) ;
color: red;
}
</style>
</head>
<body>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
</body>
</html>
/*
在实际开发中，定义序列项图标一般不这么用，
而用更高级的iconfont图标技术实现
*/
七、表格
表格一般不都是给个边框么，结合边框使用就行了。
不过还是有另外的一些东西。
定义标题：
<caption></caption>
caption-side: top 标题在顶部
bottom 标题在底部
可以在table中定义，也可以在caption中定义，是一样的
表格边框合并：
默认单元格之间会有一点空隙，
但在实际开发中，为了更美观一般去掉。
语法：
border-collapse: separate（分离） 边框分离
collapse（折叠） 边框合并
在table中定义
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<title>CSS</title>
<style type="text/css">
table{
border-collapse: collapse;
caption-side: bottom;
}
table,tr,td{
border: 0.625rem solid red;
}
</style>
</head>
<body>
<table>
<caption>两电一邮</caption>
<tr>
<td rowspan="2">两电</td>
<td>西电</td>
</tr>
<tr>
<td>成电</td>
</tr>
<tr>
<td>一邮</td>
<td>北邮</td>
</tr>
</table>
</body>
</html>
相对于合并，分离时可以定义间距。
表格边框间距：
border-spacing：像素值
在table中定义
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<title>CSS </title>
<style type="text/css">
table{border-spacing: 0.625rem;}
table,tr,td{border: 0.625rem solid red;}
</style>
</head>
<body>
<table>
<tr>
<td>???</td>
<td>???</td>
</tr>
<tr>
<td>???</td>
<td>???</td>
</tr>
</table>
</body>
</html>
八、图片样式
1.图片大小
图片的大小
width定义元素宽度，height定义元素高度
CSS中这个两个属性还可以定义图片，取值都是像素值
实际开发中不建议使用大图片然后CSS调成小图片，
因为大图片体积大，会拖延页面的加载速度
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<title>CSS </title>
<style type="text/css">
#i{
width: 6.25rem;
height: 6.25rem;
}
</style>
</head>
<body>
<img id="i" src="../image/神龙至尊3.jpg" />
</body>
</html>
2.图片边框
图片边框
也是用border定义的，和以前一样，也是三个属性，一样的语法
对于边框样式，在实际开发中都是使用简写形式
3.图片对齐
图片对齐
CSS中使用 text-align 属性来定义水平对齐的方式
取值有三个 right left center
text-align 一般用于两个地方：
文本水平对齐和图片水平对齐
图片是在父元素中进行水平对齐的，
所以应该在父元素中定义text-align属性
垂直对齐
CSS中可以用vertical-align属性来定义图片的垂直对齐方式
取值 top 顶部对齐
middle 中部
baseline 基线
bottom 底部
<style type="text/css">
#i1{
vertical-align: top;
}
#i2{
vertical-align: bottom;
}
#i3{
vertical-align: middle;
}
#i4{
vertical-align: baseline;
}
</style>
4.文字环绕
文字环绕：
网页布局中，经常遇到图文混排的情况，让文字环绕图片。
CSS中可以使用float属性来实现文字环绕。
语法：
float： left 元素向左浮动
right 元素向右浮动
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<title>CSS </title>
<style type="text/css">
#k{
float: left;
}
</style>
</head>
<body>
<img id="k" src="../image/神龙至尊3.jpg" />
<p id="k">
我将掌控神龙之力。
<br />
我用双手成就你的梦想。
<br />
移库。
</p>
</body>
</html>
九、背景样式
背景图片 background-image 定义背景图片的地址
background-repeat 定义背景图片重复，如横向重复，纵向重复
background-position 定义背景图片的位置
background-attachment 定义背景图片固定
1.背景图片、颜色
背景样色 background-color： 颜色值（关键字、十六进制RGB值
color定义文本颜色，而背景样色定义用background-color
背景图片和图片是不一样的，背景图片使用CSS实现的，而图片使用HTML实现的，
两者的适用场合也不一样，大多数情况下都是使用图片，
不过在某些无法使用图片的场合中，就需要考虑背景图片。
路径可以加引号，也可以不加引号，一般不加
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<title>CSS </title>
<style type="text/css">
div{background-color: red;width: 25rem;}
p{background-image: url(../image/神龙至尊3.jpg);}
#i{
font-size: large;
width: 12.5rem;
}
</style>
</head>
<body>
<div >
背景样色
</div>
<p id="i">
背景图片
</p>
</body>
</html>
2.背景重复
background-repert: repeat 水平、垂直重复
repeat-x 水平
repeat-y 垂直
no-repeat 不
如果不定义取值，默认repeat
3.图片位置
图片位置
background-position：像素值/关键字（不考虑百分比取值）
取值为像素值时，要同时设置水平和垂直方向的数值
：12px 24px ；（前水平，后垂直）
相对于该元素的左上角
关键字 top left
top center
top right
left center
center center
right center
bottom center
bottom right
bottom left
各个位置差不多就是下面这个图的位置
---------------------------------------------
- - - -
- - - -
- - - -
- - - - - - - - - - - -
- - - -
- - - -
- - - -
- - - -
- - - - - - - - - - - -
- - - -
- - - -
---------------------------------------------
实际开发中一般用CSS Spirit技术
4.图片固定
图片固定：
可以用background-attachment属性来定义背景图片是否随着元素一起滚动，还是固定不动
取值： scroll 随着一起滚动
fixed 不随着
实际开发中几乎用不上
十、超链接样式
1.第一点
超链接伪类：
a:link 未访问时
a:visited 访问后
a:hover 经过时
a:active 点击激活
必须按着这个顺序写（love hate）,不然浏览器可能无法正常显示。
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<title>css</title>
<style type="text/css">
a{text-decoration: none;}
a:link{color: red;}
a:visited{color: blue;}
a:hover{color: purple;}
a:active{color: yellow;}
</style>
</head>
<body>
<a href="http://bilibili.com" target="_blank">哔哩哔哩</a>
</body>
</html>
/*
如果一个地址的超链接在之前被单击过，那么浏览器会记下你的访问记录，下次你再用这个
已经访问过的地址作为超链接地址时，他就是紫色的，CSS定义就不会出现。换一个网址就行了。
*/
hover:不只限于a元素，实际上，一切元素都可以用。
例如
#i:hover{
background-color: red;
}
2.第二点
浏览器鼠标样式：
cursor default
pointer
text
crosshair
wait
help
move
e-resize/w-resize
ne-resize/sw-resize
nw-resize/se-resize
n-resize/s-resize
给元素定义这个，那么鼠标移动到它上面的时候就会显示出对应的样式
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<title>CSS </title>
<style type="text/css">
#i{
cursor: wait;
}
</style>
</head>
<body>
<img src="../image/表情包1.gif" id="i" />
</body>
</html>
自定义鼠标样式：
cursor：url（图片地址），属性值；
这个图片后缀名一般是.cur 可以用一些小软件制作
属性一般会用到三个：default、pointer、text
十一、盒子模型
十二、浮动布局
十三、定位布局
十四
记得笔记太乱了，过几天再出个续集，把后面三个补全。如有错误，欢迎指出，感激不尽。
主页还有HTML常用标签表、常用表单标签、CSS常用属性表、W3C十六色。
1620
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
