CSS
简介
- HTML的局限性
只关注内容的语义。比如<h1>表明这是一个大标题，<p>表明这是一个段落，<img>表明这儿有一个图片，<a>表示此处有链接。
- CSS——网页美容师
CSS是层叠样式表(Cascading Style Sheets ）的简称，也称之为CSS样式表或级联样式表。
- CSS最大价值
由HTML专注去做结构呈现，样式交给CSS，即结构(HTML)与样式(CSS相分离。
语法规范
使用HTML时，需要遵从一定的规范，CSS也是如此。要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则。
CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。
- 选择器是用于指定CSS样式的 HTML标签，花括号内是对该对象设置的具体样式
- 属性和属性值以“键值对”的形式出现
- 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
- 属性和属性值之间用英文
:分开 - 多个“键值对”之间用英文
;进行区分
代码风格
- 样式格式书写
紧凑格式：
h3 {
color: deeppink; font-size: 20px; }
展开格式：
h3 {
color: pink;
font-size: 20px;
}
- 样式大小写
h3 {
color: pink;
}
H3 {
COLOR: PINK;
}
- 空格规范
（1）属性值前面，冒号后面，保留一个空格
（2）选择器〔标签）和大括号中间保留空格
属性书写顺序
- 布局定位属性
display（建议第一个写，关系到模式）/ position/ float / clear / visibility / overflow
- 自身属性
width / height / margin / padding / border / background
- 文本属性
color / font / text-decoration /text-align / vertical-align / white-space / break-word
- 其他属性（CSS3 )
content / cursor / border-radius / box-shadow / text-shadow / background / linear-gradient...
页面布局整体思路
为了提高网页制作的效率，布局时通常有以下的整体思路：
- 必须确定页面的版心（可视区），我们测量可得知。
- 分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则。
- 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置。页面布局第二准则。
- 制作HTML结构。遵循先有结构，后有样式的原则。结构永远最重要。
- 先理清楚布局结构，再写代码尤为重要。
导航栏注意点
实际开发中，我们不会直接用链接a，而是用li包含链接a(li+a)的做法。
- li+a语义更清晰，一看这就是有条理的列表型内容。
- 如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名。
注意：
- 让导航栏一行显示，给
li加浮动，因为li是块级元素，需要一行显示 - 这个
nav导航栏可以不给width，将来可以继续添加其余文字 - 因为导航栏里面文字不一样多，所以最好给链接
a左右padding撑开盒子，而不是指定宽度
基础选择器
选择器（选择符）就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择标签用的。
选择器分为基础选择器和复合选择器两个大类。其中，基础选择器是由单个选择器组成的。基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器。
标签选择器
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
语法：
标签名{
属性1: 属性值1;
属性2: 属性值2;
}
作用：标签选择器可以把某一类标签全部选择出来，比如所有的<div>标签和所有的<span>标签。
优点：能快速为页面中同类型的标签统一设置样式。
缺点：不能设计差异化样式，只能选择全部的当前标签。
类选择器
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点.号显示。
- 类选择器使用
.（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)。 - 可以理解为给这个标签起了一个名字，来表示。
- 长名称或词组可以使用中横线来为选择器命名。
- 不要使用纯数字、中文等命名，尽量使用英文字母来表示。
语法
.类名 {
属性1: 属性值1;
color: red;
}
<!--结构需要用class属性来调用class类的意思-->
<div class= "red">变红色</div>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript_Exercise</title>
<link rel="shortcut icon" href="imag/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="CSS/main.css">
<style>
div {
width: 100px;
height: 100px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="red"></div>
</body>
</html>
类选择器之多类名
我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签。简单理解就是一个标签有多个名字。
- 多类名使用方式
<div class="red font20">hello world</div>
(1) 在标签class属性中写多个类名
(2) 多个类名中间必须用空格分开
(3) 这个标签就可以分别具有这些类名的样式
- 多类名开发中使用场景
(1) 可以把一些标签元素相同的样式（共同的部分）放到同一个类里面
(2) 这些标签都可以调用这个公共的类然后再调用自己独有的类
(3) 从而节省CSS代码，统一修改也非常方便
id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id选择器，CSS中 id选择器以#来定义。
id属性只能在每个HTML文档中出现一次
口诀：样式#定义，结构id
最低0.47元/天 解锁文章
2120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
