文章目录
CSS
1、CSS概念
CSS :层叠样式表(英文全称:Cascading Style Sheets),样式能够叠加。
- 能够对网页种的元素位置的排版进行像素级精确控制,实现美化的效果;
- 能够做到页面的样式和结构的分离,降低耦合度,提高开发效率;
2、CSS基本使用
2.1、CSS与HTML结合的三种方式
2.1.1、行内样式
- 在标签内使用 style 属性指定 CSS 代码
< p style = "color: red"> hello CSS </p>
2.1.2、内部样式
- 定义 style标签,style 标签内容就是 CSS 代码,只能在当前页面有效.(可以定义在任意位置,一般定义在head 标签中)
<style>
p{
color: red;
}
</style>
2.1.3、外部样式
- 在head标签内,定义link标签,引入外部资源
<link rel = "stylesheet" type="text/css href="css/a.css"> 没有ref属性也可以,默认就是样式表
2.2、语法
格式
选择器 {
属性名1:属性值1;
属性名2:属性值2;
... ...
}
- 冒号后面带空格
- 选择器和 { 之间也有一个空格
- css 不区分大小写,开发时统一使用小写
- 每一对属性需要使用 ; 隔开,最后一对属性可以不加;
代码风格:
- 紧凑风格:一般用于部署阶段,减少不必要的空格,缩进,换行,节省带宽资源,css代码越长,要下载的内容就越多
p { color: red; font-size: 30px;}
- 展开风格 : 一般用于开发阶段,可读性比较好
p {
color: red;
font-size: 30px;
}
- 实际开发中,采取的正确思路是,如果css文件修改了,就该一下css文件的名字,此时浏览器在加载 css 的时候发现这个新的css文件在之前没有缓存过(是否缓存过使用文件名来区分的),就能保证新版本的css一定会被浏览器加载
2.3、选择器
CSS选择器:先选中某一个或一类元素,先选中再操作
2.3.1、基础选择器
Ⅰ、类选择器
语法:
. class属性值 { }
-
类名用 .开头
-
通过类属性来指定元素样式,一个标签可以有多个类名
-
可以让多个标签都使用一个类
<style>
.city {
color: red;
}
.season {
color: green;
}
</style>
<p class="city">北京</p>
<p class="city">天津</p>
<p class="city">上海</p>
<div class="season hot">春天</div>
<div class="season">夏天</div>
<div class="season">秋天</div>
<div class="season">冬天</div>
Ⅱ、id选择器
语法:
#id属性值 { }
- 以 #开头表示 id选择器
- id 值是唯一的,只能有一个,就像身份证号一样
<style>
#ha {
color: red;
}
</style>
<div id="ha">蛤蛤蛤</div>
Ⅲ、标签选择器
语法:
标签名称 { }
- 能快速将同一类型的标签都选择出来
- 但是不能差异化
<style>
p {
color: red;
}
div {
color: green;
}
</style>
<p>北京</p>
<p>天津</p>
<p>上海</p>
<div>春天</div>
<div>夏天</div>
<div>秋天</div>
<div>冬天</div>
Ⅳ、通配符选择器
- 使用 * ,选取所有的元素
* {
color: red;
}
页面中所有的内容都会变成红色
2.3.2、复合选择器
CSS中支持很多种不同风格的选择器,这些选择器搭配使用,就可以随心所欲的选择任意的元素
Ⅰ、后代选择器
语法:
元素1 元素2 … 元素n{
属性 : 值;
}
-
先指定一个父元素,在指定一个子元素
-
后代不一定非得是子元素,也可以是孙子元素,
-
后代选择器不一定非得是标签选择器的组合,也可以是任意的基础选择器的组合
-
后代选择器可以有很多层
ol li{
color : red;
}
.list li a{
color: blue;
}
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<ol>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ol>
Ⅱ、子选择器
语法:
元素 1 > 元素2 > 元素n {
属性 : 值
}
- 先找元素1,然后在元素1里面找元素2,元素2必须是元素1的子元素,不能是孙子元素
Ⅲ、并集选择器
语法:
元素1,元素2{
属性 : 值
}
- 一次选中多个标签
- 通过 , 跟给多个原型
Ⅳ、伪类选择器
这是一个很大的概念,有很多种,只是介绍一些常用的
1)链接伪类选择器
和 a 标签搭配使用,根据 a 标签的状态来选择
- a:link:初始化的状态
- a: visited:被访问过的状态
- a:active:正在访问状态
- a:hover:鼠标悬浮状态
带 : 就是伪类选择器
<style>
a:link{
color: black;
font-size: 30px;
}
a:visited{
color: green;
}
a:hover{
color: red;
}
</style>
<a href="http://www.baidu.com">百度</a>
2):force伪类选择器
表示获取焦点的时候被选中,尤其是针对 输入框,就需要知道哪个输入框是获取到了焦点
a:link {
color: black;
/* 去掉 a 标签的下划线 */
text-decoration: none;
}
a:visited {
color: green;
}
a:hover {
color: red;
}
a:active {
color: blue;
}
<a href="#">小猫</a>
2.4、设置字体
font-family 设置字体类型(宋体,隶书,微软雅黑)
body{
font-family: '微软雅黑'; /*字体可以用中文,但不建议*/
font-family: 'Microsoft YaHei';
}
font-size:设置字体大小,常用单位px
body{
font-size: 20px;
}
font-weight:字体粗细
{
font-weight: bold;
font-weight: 700;
}
- 可以使用数字表示粗细.
- 700 == bold, 400 是不变粗, == normal
- 取值范围是 100 -> 900
font-style:文字样式
/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;
文本样式:
颜色:
color:red
color : #ff0000
color : rgb(255,0,0)
文本对齐:控制文字水平方向的对象
text-align: [值];
center:居中对齐
left:左对齐
right:右对齐
文本装饰:
text-decoration-line:[值]
- underline 下划线. [常用]
- none 啥都没有. 可以给 a 标签去掉下划线.
- overline 上划线. [不常用]
- line-through 删除线 [不常用]
文本缩进
控制段落 首行缩进 ,其他不受影响
text-indent:[值]
- 单位可以使用 px 或者 em.
- 使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.
- 缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)