CSS的基本使⽤
为什么要学习CSS?
1.html虽然可以在一定程度上修饰页面,但是也免得整体还是不够美观
2.html进行网页的书写重复的代码比较多,后期的维护性 不好
CSS概念
- 能够做到网页表现与内容分离的一种样式设计语言
- 能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式
- 拥有对网页对象和模型样式编辑的能力
- 能够进行初步交互设计
- 是基于文本展示最优秀的表现设计语言
- 可以简化或者优化写法,有较强的易读性
1. CSS基本语法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xhCgLZfk-1598925879220)(https://static01.imgkr.com/temp/2855cddddc7945bbbcbd1e4eeb3cf605.png)]
// CSS以键值对方式书写
选择器名 {
属性 : 属性值;
......
}
div {
background-color : red;
}
// div 块级标签
注意：
- css声明要以分号; 结束，声明以{}括起来
- 建议⼀⾏书写⼀个属性
- 若值为若⼲单词，则要给值加引号，如 font-family: “agency fb”;
2. 注释
多行注释
/* 这里的内容就是多行注释*/
**3. CSS的使用 **
(1)行内式
- ⾏内样式将样式定义在具体html元素的style属性中
- 以⾏内式写的CSS耦合度⾼，只适⽤于当前元素，在设定某个元素的样式时⽐较常⽤
<p style="color:red;font-size:50px;">这是⼀段⽂本</p>
在当前元素使⽤ style 属性的声明⽅式, style 是⾏内样式属性;
color 是颜⾊属性；red 是颜⾊属性值；
font-size是字体⼤⼩属性；50px 是字体⼤⼩属性值
(2)嵌⼊式
嵌⼊式通过在html⻚⾯内容开辟⼀段属于css的代码区域，通常做法为在 head 标签中嵌套 style标签，在 style 中通过选择器的⽅式调⽤指定的元素并设置相关 CSS
<style type="text/css">p {color: blue;font-size: 40px;}</style>
(3)引⼊外联样式⽂件
在实际开发当中，很多时候都使⽤引⼊外联样式⽂件，这种形式可以使html⻚⾯更加清晰，⽽且可以达到更好的重⽤效果。
要在CSS文件包中创建一个以CSS后缀的文件
style.css
p {
color: green;
font-size: 30px;
}
test.html
<link rel="stylesheet" type="text/css" href="style.css">
rel:rel 属性规定当前⽂档与被链接⽂档之间的关系。
stylesheet:⽂档的外部样式表。
很多时候，⼤量的 HTML ⻚⾯使⽤了同⼀个CSS。那么就可以将这些 CSS 样式保存在⼀个单独的.css ⽂件中，然后通过 link 元素去引⼊它。
注意：当有多重样式时，CSS会遵循就近原则,谁近选谁，越精确越优先。
CSS中三种引入方式遵循的就近原则 不相同的样式会进行样式的叠加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
<!-- (2)内嵌样式 要在head中书写 -->
<!-- p代表标签 的名称 -->
p{
<!-- 字体颜色 -->
color: #008000;
<!-- 字体的大小 -->
font-size: 20px;
<!-- 字体加粗 -->
font-weight: 200;
}
</style>
<!-- (3)外部式(连接式) rel:引入文件和当前文件的关系 href : 引入文件的路径 -->
<link rel="stylesheet" href="text/css" href="css/css1.css">
</head>
<body>
<!-- (1) 行内样式 键值对形式 -->
<!-- <p style="color: aqua;">上海尚学堂</p> -->
<p>上海尚学堂</p>
<p>上海尚学堂</p>
<p>上海尚学堂</p>
</body>
</html>
(4)CSS选择器
在 CSS 中，选择器是⼀种模式，⽤于选择需要添加样式的元素。
CSS选择器有很多，掌握常⽤的即可；
1.通用选择器
选择所有*
* {
......
}
* {
color: orange;
}
2.元素选择器
选择指定标签
元素名称 {
......
}
p {
color: red;
font-size: 20px;
}
3. ID选择器
选择设置过指定id属性值的元素 #
**注意 : **id的命名可以使用数字,字母,下划线,中划线组成,但是不能使用数字开头
#id属性值 {
......
}
#p1 {
font-weight: bold;
}
4.类选择器
选择设置过指定class属性值的元素 .
.class属性值 {
......
}
.hidden {
display: none;
}
5.分组选择器
当⼏个元素样式属性⼀样时，可以共同调⽤⼀个声明，元素之间⽤逗号分隔
选择器1,选择器2,... {
......
}
h2 , #pre1 {
color: orange;
font-style: italic;
}
CSS样式的优先级，是根据选择器的精确度/权重来决定的，常⻅的权重如下，权重越⼤，优先级越⾼ : ID>类选择器>元素选择器>通用选择器
元素选择器：1
类选择器：10
id选择器：100
内联样式：1000
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* (1)通用选择器 * */
*{
color: chartreuse;
}
/* (2)元素选择器 */
div{
width: 300px;
height: 400px;
/* 背景颜色 */
background-color: #008000;
/* 边框的粗细 边框的风格 边框的颜色 */
border: 1px solid red;
}
/* (3)id选择器 */
/* 注意 : id的命名 数字,字母,下划线,中划线组成 不能使用数字开头 */
#div1{
background-color: blue;
}
/* (4)类选择器 class */
/* 类的命名是可以重复的 */
.div_2{
background-color: antiquewhite;
}
</style>
</head>
<body>
<div id="div1">1</div>
<div class="div_2">2</div>
<div>3</div>
</body>
</html>
<<<<<<<<其他选择器>>>>>>>>
6.组合选择器
CSS组合选择器说明了两个选择器直接的关系。 CSS组合选择符包括各种简单选择符的组合⽅式。
在 CSS 中包含了四种组合⽅式: 后代选取器(以空格分隔)，⼦元素选择器(以⼤于号分隔），相邻兄弟选择器（以加号分隔），普通兄弟选择器（以波浪线分隔）。
7.后代选择器（派⽣选择器）
⽤于选择指定标签元素下的后辈元素，以空格分隔
选择器1 选择器2 {
......
}
.food li {
border: 1px solid red;
}
<h1>⻝物</h1>
<ul class="food">
<li>⽔果
<ul>
<li>⾹蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>⽩菜</li>
<li>油菜</li>
<li>卷⼼菜</li>
</ul>
</li>
</ul>
8.⼦元素选择器
⽤于选择指定标签元素的所有第⼀代⼦元素，以⼤于号分隔
选择器1 + 选择器2 {
......
}
#d + div {
border: 1px solid red;
}
html代码同上
9.相邻兄弟选择器
可选择紧接在另⼀元素后的元素，且⼆者有相同⽗元素。以加号分隔
选择器1 + 选择器2 {
......
}
#d + div {
border: 1px solid red;
}
<div id="d">
相邻兄弟选择器1
<ul>
<li>开⼼麻花</li>
<li>贾玲</li>
<li>宋⼩宝</li>
</ul>
</div>
<div>
相邻兄弟选择器2
</div>
10.普通兄弟选择器
选择紧接在另⼀个元素后的所有元素，⽽且⼆者有相同的⽗元素，以波浪线分隔
选择器1 ~ 选择器2 {
......
}
li ~ li {
background-color : yellow;
}
<div>
普通兄弟选择器1
<ul>
<li>开⼼麻花</li>
<li>贾玲</li>
<li>宋⼩宝</li>
<li>沈腾</li>
<li>王宁</li>
</ul>
</div>
4. CSS常⽤属性设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 顶部部分的设置 */
.top{
width: 100%;
height: 100px;
/* 边框的大小 边框的风格 边框的颜色 */
border: 1px solid red;
}
/* 设置文本 */
.top_a{
/* 字体的颜色 */
color: gray;
/* 字体的大小 */
font-size: 12px;
/* 字体的加粗 */
font-weight: bold;
/* 字体的风格 */
font-family: 宋体;
/* 字体的倾斜 */
font-style: initial;
/* 去除下划线 */
text-decoration: none;
}
a:hover{
color: red;
/* 下划线展示 */
text-decoration: underline;
}
.tips{
width: 100%;
height: 2.5rem;
border: 0.0625rem dotted indianred;
/* 背景颜色 */
background-color: pink;
/* 文本水平居中 */
text-align: center;
/* 文本垂直居中 */
/* 行高的高度要和div的高度一致,这样才能够垂直居中 */
line-height: 2.5rem;
}
</style>
</head>
<body>
<!-- 类元素选择器 -->
<div class="top">
<a href="" class="top_a">登录页面，调查问卷</a>
</div>
<!-- 中间的提示 -->
<div class="tips">
<span>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。</span>
</div>
</body>
</html>
<!--
<!-- 字体的属性 -->
/* 字体的颜色 */
color: gray;
/* 字体的大小 */
font-size: 12px;
/* 字体的加粗 */
font-weight: bold;
/* 字体的风格 */
font-family: 宋体;
/* 字体的倾斜 */
font-style: initial;
/* 去除下划线 */
text-decoration: none;
-->
1.背景
CSS 背景属性⽤于定义HTML元素的背景效果
1. background-color
设置元素的背景颜⾊
body {
background-color:#ff0000;
}
2. background-image
设置元素的背景图像，默认情况下，背景图像进⾏平铺重复显示，以覆盖整个元素实体。
body {
background-image:url('paper.gif');
}
3.background-repeat
设置是否及如何重复背景图像
body {
background-image: url(img/logo.jpg);
background-repeat: no-repeat;
}
| 值 | 说明 |
|---|---|
| repeat | 背景图像将向 垂直和水平方向重复,这是默认的 |
| repeat-x | 只有水平位置会重复背景图像 |
| repeat-y | 只有垂直位置会重复背景图像 |
| no-repeat | background-image不会重复 |
| inherit | 指定background-repea属性设置应该从 父元素继承 |
2. 文本
1.color
body {
color:blue;
}
h1 {
color:#00ff00;
}
h2 {
color:rgb(255,0,0);
}
2. text-align
设置⽂本对⻬⽅式，center（居中），left（左对⻬），right（右对⻬）
body {
text-align:center;
}
h1 {
text-align:right;
}
h2 {
text-align:right;
}
3. text-decoration
规定添加到⽂本的修饰，属性值：none、underline、overline、line-through
1）underline
对⽂本添加下划线，与HTML的u元素相同。
2）overline
对⽂本添加上划线。
3）line-through
对⽂本添加中划线，与HTML中的s和 strike 元素相同。
4）none
关闭原本应⽤到元素上的所有装饰。
h3 {
text-decoration:underline;
}
4. text-indent
设置⽂本⾸⾏缩进
p.ident2 {
text-indent: 2em;
}
em⼀个相对值，例如⻚⾯的⽂本⼤⼩为17px,则2em就为17px*2
3. 字体
1. font-family
⽂本字体，该属性设置⽂本的字体。
font-family属性应该设置⼏个字体名称作为⼀种"后备"机制，如果浏览器不⽀持第⼀种字体，他将尝试下⼀种字体，所以尽量将不常⻅的字体靠前，将最常⻅的字体放置在最后，作为替补。
注意：
1）只有当字体名中含有空格或#、$之类的符号时（如 New York），才需要在font-family声明中加引号：
body {
font-family: "arial black";
}
2）多个字体系列是⽤⼀个逗号分隔指明
/* 靠前的字体先⽣效 */
p{
font-family: 微软雅⿊,⿊体,"agency fb";
}
2. font-size
⽂本⼤⼩
body {
font-size: 50px; /*字体⼤⼩50px*/
}
#span1 {
font-size: 25px; /*字体⼤⼩25px*/
}
3. font-style
字体⻛格，该属性最常⽤于规定斜体⽂本。 属性值：normal、italic、oblique
1）**normal：**⽂本正常显示；
2）**italic：**⽂本斜体显示；
3）oblique：⽂本倾斜显示，oblique是将⽂字强制倾斜。
说明：⼀般情况下，字体有粗体、斜体、下划线、删除线等诸多属性，但是不是所有字体都具有这些
属性，⼀些不常⽤字体可能只有正常体，若使⽤italic属性则没有效果，所以需要oblique属性强制倾斜。
4.font-weight
字体加粗，该属性设置⽂本的粗细。
bold：可以将⽂本设置为粗体。
100 ~ 900：为字体指定了 9 级加粗度。如果⼀个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别。
100 对应最细的字体变形；
900 对应最粗的字体变形；
400 等价于 normal；
700 等价于 bold。
4.对⻬⽅式
1. text-align
规定元素中的⽂本的⽔平对⻬⽅式。属性值如下：
| 值 | 描述 |
|---|---|
| left | 把文本排列到左边.默认值: 由浏览器决定 |
| right | 把文本排列到右边 |
| center | 把文本排列到中间 |
| justify | 实现两端对齐文本效果 |
| inherit | 规定应该从父元素继承text-align属性的值 |
注意：
值 justify 可以使⽂本的两端都对⻬。在两端对⻬⽂本中，⽂本⾏的左右两端都放在⽗元素的内边界
上。然后，调整单词和字⺟间的间隔，使各⾏的⻓度恰好相等。对最后⼀⾏不⽣效。
2.display属性
display 属性规定元素应该⽣成的框的类型。这个属性⽤于定义建⽴布局时元素⽣成的显示框类型
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示 |
| block | 此元素将显示块级元素,此元素前后会带有换行符 |
| inline | 默认,此元素会被显示为内联元素,元素前后没有换行符 |
| inline-block | 行内块元素(CSS2.1新增的值) |
| list-item | 此元素会作为列表显示 |
3. 浮动
float的属性值有none、left、right。
1. 只有横向浮动，并没有纵向浮动。
2. 会将元素的display属性变更为block。
3. 浮动元素的后⼀个元素会围绕着浮动元素（典型运⽤是⽂字围绕图⽚）
4. 浮动元素的前⼀个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应⽤float）。
4. 盒⼦模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 清除浏览器的留白 */
body.html{margin: 0px; padding: 0px;}
.div_1{
width: 200px;
height: 200px;
background-color: #0000FF;
/* 内边距 */
/* 指定四边都是50边距 */
/* padding:50px ; */
/* 指定上下的边距 */
/* padding: 20px 50px; */
/* 指定四边的边距 是按照顺时针的方向指定的*/
/* padding: 10px 20px 30px 40px; */
/* 指定某一边的边距 */
/* padding-top: 70px; */
/* 外边距 可以给盒子进行定位 */
/* margin: 50px; */
/* margin-left: 80px; */
/* margin-top: 70px; */
/* 外边距 垂直的方向会取较大的值 */
margin-bottom: 40px;
/* 外边距 水平方向会合并 */
margin-right: 40px;
}
.div_2{
width: 200px;
height: 200px;
background-color: green;
margin-left: 50px;
}
div{
float: left;
}
</style>
</head>
<body>
<div class="div_1"></div>
<div class="div_2"></div>
</body>
</html>
border、padding、margin三个属性构成了盒⼦模型。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6GxQHDYg-1598925879226)(https://static01.imgkr.com/temp/e61477a1a8e54169822d1a15c4772008.png)]
1.border
设置所有的边框属性。
1）可同时设=置边框的宽度、样式、颜⾊
table, th, td {
border: 1px solid black;
}
table {
width:100%; height:50px;
}
2）使⽤border-width、border-style、border-color单独设置
table,td {
border-width: 1px;
border-style: dotted;
border-color: green;
}
3）border-style的属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4Q7KNKtc-1598925879228)(https://static01.imgkr.com/temp/eede2573e3af4b658c6067fd1ae82fe8.png)]
4）border-collapse
设置是否将表格边框折叠为单⼀边框。
属性值：separate（默认，单元格边框独⽴）、collapse（单元格边框合并）
table {
border-collapse : collapse;
}
2. padding
设置元素所有内边距的宽度，或者设置各边上内边距的宽度。
如果在表的内容中控制⽂本到边框的内边距，使⽤td和th元素的填充属性：
td {
padding:15px;
}
单独设置各边的内边距：padding-top、padding-left、padding-bottom、padding-right
默认按照上右下左的顺序设定
td .test1 {
padding: 1.5cm
}
td .test2 {
padding: 0.5cm 2.5cm
}
<table border="1">
<tr>
<td class="test1">
这个表格单元的每个边拥有相等的内边距。
</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td class="test2">
这个表格单元的上和下内边距是0.5cm，左和右内边距是 2.5cm。
</td>
</tr>
</table>
**注意：**通过padding属性设置元素内边距时，会使元素变形。若不想影响格式效果，可以⽤margin属性设置元素外边距。
3. margin
设置⼀个元素所有外边距的宽度，或者设置各边上外边距的宽度。
p.margin {
margin: 2px 4px 3px 4px;
}
单独设置各边的外边距：margin-top、margin-left、margin-bottom、margin-right
p.margin{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
*{
margin: auto auto;
}
*{
margin: 100px auto;
}
说明：
auto：⾃动，可以理解为居中的意思。浏览器⾃动计算外边距。
margin: auto auto：第⼀个auto表示上下外边距⾃动计算，第⼆个auto表示左右外边距⾃动计算。
但是上下外边距在⾃动计算时不会⽣效，⽽左右外边距会⽣效，表现为居中状态，效果如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IPCOAec1-1598925879230)(https://static01.imgkr.com/temp/c33181e807114266a1b0ee25b0cd4321.png)]
若要设置为上下左右居中状态，则要计算好⾃⾏设置上下的外边距，效果如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7HWGtVf6-1598925879231)(https://static01.imgkr.com/temp/0078e75dcfcd4f268fb68f512b19c869.png)]
注意：此时使⽤margin-top不⽣效。了解
css的定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div_1{
width: 200px;
height: 200px;
background-color: red;
/* 定位 : 绝对定位 */
/* position: absolute; */
/* 相对定位 */
position: relative;
/* 固定定位 */
/* position:fixed; */
top: 300px;
left: 200px;
}
.div_2{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="div_1"></div>
<div class="div_2"></div>
</body>
</html>
<!--
position (定位的四种属性)
(1)绝对定位
absolute : 定位离开之后释放之前的位置 基于外层父级标签而言
(2)相对定位
relative : 定位离开之后之前的位置没有释放 基于之前的位置来说
(3)固定定位
fixed : 始终是基于浏览器的左上角定位 适合做广告
(4)默认定位
static : 初始的定位的操作
-->
扫一扫
634
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
