CSS基础之选择器

css的外链式

使用link标签将css文件和html文件相联系,实现样式与HTML相分离。

<head><head><link rel=\"stylesheet\"  href=\"style.css\"/><head/><head/>

选择器

用于选择标签，更好地添加样式。

基础选择器

（1）标签选择器

将文件中所有的标签都选出来，格式如下：
标签名 {
属性：属性值；
}

（2）类选择器

可以选择多种标签，在修改样式中使用率最高，在一个标签内部只能有一个class。格式如下：
css中的类选择器：
.类名 {
属性：属性值；
}
html中引用类选择器：
<标签名 class=“类名1 类名2”><标签名/>

（3）id选择器

与类选择器很相似，区别在于只能使用一次，一次只能选择一个标签，在js中更常用。格式如下：
#id {
属性：属性值；
}
html中引用类选择器：
<标签名 id=“id”><标签名/>

（4）通配符选择器

选中所有标签，会降低页面的响应速度，不建议随便使用，格式如下：
* {
属性：属性值；
}
通常使用情况是清除html的默认边距：

* {margin:0;padding:0;}

（5）选择器使用

一般使用类选择器
尽量少使用通用选择器和id选择器
尽量不使用无语义的标签选择器，如div、span

复合选择器

为了更准确更精细的选择标签。

（1）后代选择器

父级与子级用空格隔开，格式如下：
父级子级 {
属性：属性值；
}

（2）子代选择器

只选择某元素的子元素，格式如下:
父级>子级 {
属性：属性值；
}
子代选择器和后代选择器的区别在于后代选择器可以选择出所有包含于父级的好几代子级，而子代选择器只能选出最近的一代。

（3）交集选择器

是一种“既……又……”的关系，用“.”号连接，格式如下：
标签/选择器.标签/选择器 {
属性：属性值；
}

（4）并集选择器

是一种“和”的关系，用“，”号隔开，通常用于集体声明，格式如下：
标签/选择器，
标签/选择器，
标签/选择器，{
属性：属性值；
}

（5）链接伪类选择器

a:link，未点开的链接
a:visited，已点开的链接
a:hover，鼠标移动到链接
a:active，点击的链接，按下鼠标不松开
写的时候顺序不要颠倒，按照lvha的顺序来写，常用的是hover。

字体

（1）font-size：字体大小

一般默认16px，最好在body标签下设定字体大小为16px。

（2）font-family：字体

当多种字体时，用逗号隔开，表示当浏览器没找到第一个字体时就找下一个字体。格式如下：

body {font-family：Arial,\"Microsoft YaHei\",\"微软雅黑\",\"黑体\";}

属性值不支持中文的话可以使用Unicode编码。

（3）font-weight：字体粗细

属性值：normal，bold加粗，number数字直接设置，其中400=normal，700=bold，不需要跟单位，推荐使用number。

（4）font-style：字体风格

是否倾斜，属性值：italic(倾斜) / normal（不倾斜）。

（5）综合写法

更加简洁。
格式如下:
选择器 {
font：font-styl font-weight font-size/line-height font-family
}
必须严格按照顺序，各属性使用空格隔开，有些属性可以不写，最后两个字体大小和样式必须要写，不可以省略。
可以使用em标签强调，再使用font-style=normal使其不倾斜，然后再添加其他样式。

文本

属性	属性值	描述
color	一般使用十六进制，前面带#号	文本颜色
-text-align	center，right，left	文本对齐方式
line-height	像素，一般比字体大七八像素	行间距
text-indent	多少em，即字体倍数	首行缩进，text-indent:2em
text-decoration	none无装饰，blink闪烁，underline下划线，overline上划线，line-through贯穿线	文本装饰,常用于取消a标签的下划线

常用快捷语法

快捷键组合	作用
！+ tab	快速生成html模板
标签名 + tab	快速生成标签结构
标签名 * number +tab	快速生成多个标签
标签名 > 标签名 + tab	快速生成父子关系标签
标签名 + 标签名 + tab	快速生成兄弟关系标签
.类名 + tab	快速生成含类标签的div
#id名 + tab	快速生成id标签的div
.类名$*number + tab	生成类名自增的多个div
标签.类名*number + tab	生成含某类名的某标签
h + number+ tab	设置高度为
bgc + tab	背景颜色