文章目录
- ❤️🔥CSS简介
- ❤️🔥CSS选择器
- ❣️选择器一
- ❣️选择器二
- ❣️关系选择器
- ❤️🔥CSS属性
- ❣️字体属性
- ❣️背景属性
- ❣️文本属性
- ❣️表格属性
❤️🔥CSS简介
CSS概念
CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表。
CSS文件后缀名为 .css。
CSS用于HTML文档中元素样式的定义。
为什么需要CSS
使用 css 的唯一目的就是让网页具有美观一致的页面。
语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明（样式）。
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
<style>
h1{
color: blue;
font-size: 12px;
}
</style>
内联样式（行内样式）
要使用内联样式，你需要在相关的标签内使用样式（style）属性。
Style 属性可以包含任何 CSS 属性。
提示：
缺乏整体性和规划性，不利于维护，维护成本高。
<p style="background: orange; font-size:24px;">CSS
<p>
内部样式
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 “style” 标签在文档头部定义内部样式表。
● 单个页面内的CSS代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱。
<head>
<style>
h1 {
background: red;
}
</style>
</head>
外部样式（推荐）
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 “link” 标签链接到样式表。 标签在 “link” （文档的）头部。
<link rel="stylesheet" type="text/css"
href="xxx.css">
❤️🔥CSS选择器
❣️选择器一
CSS语法 规则由两个主要的部分构成：选择器，以及一条或多条声明（样式）。
全局选择器
可以与任何元素匹配，优先级最低，一般做样式初始化。
*{
margin: 0;
padding: 0;
}
元素选择器
HTML文档中的元素， p、b、div、a、img、body 等。
标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”
p{
font-size:14px;
}
再比如说，我想让“学完前端，继续学Java”这句话中的“前端”两个变为红色字体，那么我可以用 “span” 标签把“ 前端 ”这两个字围起来，然后给 “span” 标签加一个标签选择器。
<p>学完了<span>前端</span>，继续学Java</p>
span{
color: red;
}
● 所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等。
● 无论这个标签藏的多深，一定能够被选择上。
● 选择的所有，而不是一个。
类选择器
规定用圆点 “.” 来定义，针对你想要的所有标签使用。
优点： 灵活
<h2 class="oneclass">你好</h2>
/*定义类选择器*/
.oneclass{
width:800px;
}
class属性的特点
① 类选择器可以被多种标签使用。
② 类名不能以数字开头。
③ 同一个标签可以使用多个类选择器。用空格隔开。
<h3 class="classone classtwo">我是一个h3啊
</h3>
<h3 class="teshu" class="zhongyao">我是一个h3啊
</h3> // 错误
❣️选择器二
ID选择器
针对某一个特定的标签来使用，只能使用一次。 css 中的ID选择器 以 # 来定义。
<h2 id="mytitle">你好</h2>
#mytitle{
border:3px dashed green;
}
● ID是唯一的。
● ID不能以数字开头。
合并选择器
语法：选择器1,选择器2,…{ }
作用：提取共同的样式，减少重复代码
.header, .footer{
height:300px;
}
选择器的优先级
● CSS中,权重用数字衡量
● 元素选择器的权重为: 1
● class选择器的权重为: 10
● id选择器的权重为: 100
● 内联样式的权重为: 1000
● 优先级从高到低: 行内样式 > ID选择器 > 类选择器 > 元素选择器
❣️关系选择器
关系选择器分类
① 后代选择器
② 子代选择器
③ 相邻兄弟选择器
④ 通用兄弟选择器
后代选择器
定义
选择所有被E元素包含的F元素，中间用空格隔开。
语法
E F{}
<ul>
<li>宝马</li>
<li>奔驰</li>
</ul>
<ol>
<li>奥迪</li>
</ol>
ul li{
color:green;
}
子代选择器
定义
选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示
语法
E>F{}
<div>
<a href="#">子元素1</a>
<p> <a href="#">孙元素</a> </p>
<a href="#">子元素2</a>
</div>
div>a{
color:red
}
相邻兄弟选择器
定义
选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择。
语法
E+F{}
<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>
h1+p{
color:red;
}
通用兄弟选择器
定义
选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开，只能向下选择。
语法
E~F{}
<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>
h1~p{
color:red;
}
❤️🔥CSS属性
❣️字体属性
CSS字体属性定义字体，颜色、大小，加粗，文字样式。
color
规定文本的颜色。
div{ color:red;}
div{ color:#ff0000;}
div{ color:rgb(255,0,0);}
div{ color:rgba(255,0,0,.5);}
font-size
设置文本的大小
能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
● chrome浏览器接受最小字体是12px.
font-weight
设置文本的粗细。
| 值 | 描述 |
|---|---|
| bold | 定义粗体字符 |
| bolder | 定义更粗的字符 |
| light | 定义更细的字符 |
| 100-900 | 定义由细到粗400等同默认，而700等同于bold |
H1 {font-weight:normal;}
div{font-weight:bold;}
p{font-weight:900;}
font-style
指定文本的字体样式。
| 值 | 描述 |
|---|---|
| normal | 默认值 |
| italic | 定义斜体字 |
font-family
font-family属性指定一个元素的字体。
● 每个值用逗号分开。
● 如果字体名称包含空格，它必须加上引号。
font-family:"Microsoft
YaHei","Simsun","SimHei";
❣️背景属性
CSS背景属性主要有以下几个:
| 属性 | 描述 |
|---|---|
| background-color | 设置背景颜色 |
| background-image | 设置背景图片 |
| background-position | 设置背景图片显示位置 |
| background-repeat | 设置背景图片如何填充 |
| background-size | 设置背景图片大小属性 |
background-color属性
该属性设置背景颜色
<div class="box"></div>
.box{
width: 300px;
height: 300px;
background-color: palevioletred;
}
background-image属性
设置元素的背景图像
元素的背景是元素的总大小，包括填充和边界（不包括外边距）。
默认情况下background-image属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像，如果图像大小超过元素大小从图像的左上角显示元素大小的那部分。
<div class="box"></div>
.box{
width: 600px;
height: 600px;
background-image: url("images/img1.jpg");
}
background-repeat属性
该属性设置如何平铺背景图像
| 值 | 描述 |
|---|---|
| repeat | 默认值 |
| repeat-x | 只向水平方向平铺 |
| repeat-y | 只向垂直方向平铺 |
| no-repeat | 不平铺 |
.box{
width: 600px;
height: 600px;
background-color: #fcc;
background-image: url("images/img1.jpg");
background-repeat: no-repeat;
}
background-size属性
该属性设置背景图像的大小
| 值 | 说明 |
|---|---|
| length | 设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto |
| percentage | 计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto |
| cover | 保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小 |
| contain | 保持图片纵横比并将图像缩放成适合背景定位区域的最大大小 |
.box{
width: 600px;
height: 600px;
background-image: url("images/img1.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
background-position属性
该属性设置背景图像的起始位置，其默认值是：0% 0%
| 值 | 说明 |
|---|---|
| left top | 左上角 |
| left center | 左 中 |
| left bottom | 左 下 |
| right top | 右上角 |
| right center | 右 中 |
| right bottom | 右 下 |
| center top | 中 上 |
| center center | 中 中 |
| center bottom | 中 下 |
| x% y% | 第一个值是水平位置，第二个值是垂直位置，左上角是0% 0%，右下角是100% 100% 如果只指定了一个值，其他值默认是50%。默认是0% 0% |
| xpos ypos | 单位是像素 |
.box{
width: 600px;
height: 600px;
background-color: #fcc;
background-image: url("images/img1.jpg");
background-repeat: no-repeat;
background-position: center;
}
❣️文本属性
text-align
指定元素文本的水平对齐方式
| 值 | 描述 |
|---|---|
| left | 文本居左排列，默认值 |
| right | 把文本排列到右边 |
| center | 把文本排列到中间 |
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
text-decoration
text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等。
| 值 | 描述 |
|---|---|
| underline | 定义下划线 |
| overline | 定义上划线 |
| line-through | 定义删除线 |
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
text-transform
text-transform 属性控制文本的大小写。
| 值 | 描述 |
|---|---|
| captialize | 定义每个单词开头大写 |
| uppercase | 定义全部大写字母 |
| lowercase | 定义全部小写字母 |
h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}
text-indent
text-indent 属性规定文本块中首行文本的缩进。
p{
text-indent:50px;
}
● 负值是允许的。如果值是负数，将第一行左缩进。
❣️表格属性
使用 CSS 可以使 HTML 表格更美观。
表格边框
指定CSS表格边框，使用border属性。
table, td {
border: 1px solid black;
}
折叠边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开。
table { border-collapse:collapse; }
table,td { border: 1px solid black; }
表格宽度和高度
width和height属性定义表格的宽度和高度。
table { width:100%; }
td { height:50px; }
表格文字对齐
表格中的文本对齐和垂直对齐属性。
text-align属性设置水平对齐方式，向左，右，或中心。
td { text-align:right; }
垂直对齐属性设置垂直对齐。
td { height:50px; vertical-align:bottom; }
表格填充
如果在表的内容中控制空格之间的边框，应使用td 和 th 元素的填充属性。
td { padding:15px; }
表格颜色
下面的例子指定边框的颜色，和th元素的文本和背景颜色。
table, td, th { border:1px solid green; }
td { background-color:green; color:white; }
