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
·盒子模型