CSS样式介绍学习笔记

CSS样式介绍学习笔记

·CSS层叠样式表
命名规则：使字母、数字或下划线和减号构成，不要以数字开头。
CSS语法由三部分构成：选择器、属性、值。selector{property：value}
CSS中注释：/*…………*/

·使用CSS样式（html中嵌入CSS的方式）：
1、内联方式（行内样式）
就是在HTML的标签中使用style属性来设置CSS样式。
格式：<heml标签 style="属性：值；属性：值；…………">被修饰的内容</html标签>
特点：仅作用于本标签。

2、内部方式（内嵌样式）
就是在head标签中使用<style type="text/css">……</style>标签来设置CSS样式。
格式：<style type="text/css">……css样式代码</style>
特点：作用于当前整个页面。

3、外部导入当时（外部链入）
就是在head标签中使用<link/>标签导入一个css文件，在作用于本页面，实现css样式设置。
格式：<link href="文件名.css” type="text/css" rel="stylesheet"/>
特点：作用于整个网站。

他们的优先级：当样式冲突时，就是采用就近原则，是值css属性离被修饰的内容最近的为主。若没有样式冲突则采用叠加效果。

·CSS选择器
1、html选择符（标签选择器）
就是把html标签作为选择符使用，如p{……}网页中所有p标签采用此样式，h2{……}网页中所有h2标签采用此样

2、class类选择符（使用点.将自定义名（类名）来定义的选择符）
注：类选择符可以在网页中重复使用。

3、id选择符
定义：#id名{样式……}
使用：<html标签 id="id名">……</html标签>
注意：id选择符旨在网页中使用一次。
选择符的优先级：从大到小，id选择符>class选择符>html选择符>html属性

4、通配符选择器（通用选择器）
定义：选择器名为*的选择器。
语法：*{property: value;property: value}
功能：对所有html标签起作用，一般用于页面的初始化工作，统一字体，边框，内外边距。

5、关联选择符（包含选择符）
格式：选择符1选择符2选择符3……{样式……}

6、组合选择符（选择符组）
格式：选择符1，选择符2，选择符3……{样式……}

7、伪类选（伪元素）择符：
格式：标签名：伪类名{样式……}

·CSS中常用的属性

·color颜色属性
·RGB颜色：红（R)、绿（G)、蓝(B)三个颜色通道的变化。
·RGBA颜色：红（R)、绿(G)、蓝(B)、透明度(A)

·字体属性：font
font-size:字体大小。
font-family:字体。
font-style:normal正常，italic斜体，oblique倾斜的字体
font-weight:字体加粗：bold。

·文本属性
text-indent:首行缩进。
text-overflow:文本的溢出是否使用省略标记。
white-space:强制在同一行内显示所有文本。

·边框
border：宽度、样式、颜色。
border-color；border-style；border-width；
border-radius：圆角处理。

·背景属性
background-color；background-image

·内部白：padding

·外部白：margin

·盒子模型