CSS使用详解

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 就是当前元素的文字大小.
• 缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)