CSS笔记（一）样式,选择器
CSS笔记（一）样式,选择器
>>> CSS是啥
CSS (Cascading Style Sheets) 层叠样式表
作用：满足网页美化的诉求
用于设置外观显示样式,帮助调整排版布局的展现 ,美化标签和内容
提高版面的信息密度,加强信息的冲击力和直观性
比如：
HTML页面中的文本内容（字体、大小、对齐方式等）
图片的外形（宽高、边框样式、边距等）
版面的布局
CSS以HTML为基础，提供了丰富的功能
如字体、颜色、背景的控制及整体排版等
而且还可以针对不同的浏览器设置不同的样式。
>>> 行内式（内联样式）
又作内样式，行间样式，内嵌样式
是每个标签都有的属性：style 来设置元素样式
基本语法：
<标签名 style='属性1:属性值;属性2:属性值2;'>内容</标签名>
首行缩进属性：text-indent
文本颜色：color
字体大小：font-size
行间距：line-height
…
>>>内部样式表
在head标签内设置属性，利用style标签,统一管理同一网页所有标签内容的样式
基本语法：
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
>>>外部样式表(实际应用最多)
通过在head标签内写link标签引入css文件，使多个html文件共用一个样式，实现了内容和样式完全分离
<link href='css文件路径' rel='stylesheet'>
注意link为单标签,并且在此语法中必须指定link标签的三个属性
href : 定义所链接外部样式表文件的URL
type：定义所链接文档的类型
rel：定义当前文档与被链接文档之间的关系，告诉浏览器如何解析
此处指定为’stylesheet’表示被链接文档是一个样式表文件。
>>>优先级
行内>内部>外样
内容样式会应用最靠近标签的样式
>>>CSS样式规则
选择器 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
- 选择器后跟空格，属性与属性值中间用 ’ : ’ , 属性值后跟 ’ ; ’
- 选择器用于指定CSS样式作用的HTML对象。
- 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
- 属性值如果是数值则一定要加单位
>>>CSS选择器
-
标签选择器
按标签名称分类，为页面中某一类标签指定统一的CSS样式。
标签名{属性1:属性值1;} p{ color:blue; } a{ color:red; }优点：快速为页面中同类型的标签统一样式
缺点：不能设计差异化样式
-
类选择器
为标签先加上类属性class再为这一类设置样式
<p class='Longan'>桂圆</p> .Longan { color:green; } -
id选择器
和类选择器很像但有两点不同
- 选择器写法不同 id前是#号
- id名是唯一的，同一个页面不能有相同id
<p id='Longan'>桂圆</p> #Longan { color:green; } -
通配符选择器
设置所有内容的样式，优先级极弱
* { color:red; } -
多类名选择器
通过空格组合类名继承多种样式
<p class='Longan Beauty'>桂圆</p> .Longan { color:green; } .Beauty { font-size:30px; }
>>>选择器命名规范
1. 要见名知意，全英文。
2. 可以使用驼峰原则，或者用 ' - ' 或 ' _ ' 进行单词连接。
3. 命名需要进行适当的缩写, 单词连接层级不要超过4层
上一篇： 样式选择器 CSS选择器 一
下一篇： css样式选择器