1.css简介
CSS主要用于设置html页面的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式
1.1CSS语法规范
在<head>里添加<style>css样式 </style>
1.2CSS代码风格
样式格式:
样式大小写:
全部用小写,特殊情况除外
空格规范:
2.css基础选择器
选择器的分类
基础选择器和复合选择器两大类
基础选择器由单个选择器组成
基础选择器:标签选择器、类选择器、id选择器、通配符选择器
标签选择器:
用标签名作为选择器,会选择页面中的全部的相应的标签,不能差异化显示
,
类选择器:
单独选一个或某几个标签
利用class属性来调用class类的意思
口诀:样式点定义,结构类(class)调用,一个或多个,开发最常用,别人也可使用相同的类名
注意:类名不能是标签名;用英文字母,不要使用纯数字或这中文;命名有意义
类选择器——多类名:
一个标签有多个类名,这些标签均可选出这个标签
id选择器:
id选择器以"#"来定义
语法:
#id名{
属性一:属性值;
.....
}
口诀:样式#定义,结构id调用,只能调用一次,别人切勿使用
一般用于页面唯一性的元素的上,经常和js搭配使用
通配符选择器:
使用*定义,选取页面中的所有元素(标签)
语法:
*{
属性一:属性值;
.....
}
不需要调用,自动给所有的元素使用样式
3.字体属性
font-family设置字体系列:
对于含有多个字体优先看第一个字体,第一个不存在再看第二个
中文加引号,多个单词组成的的字体也要加引号,且中间加空格
font-size字号大小:
标题标签比较特殊需要单独制定文字大小
html默认的字体大小为16px
font-weight字体粗细:
font-style文字样式:
平时很少给文字加斜体,反而要给斜体标签(em,i)改为不倾斜字体
字体的复合属性:
顺序不可颠倒:
字体属性总结:
4.文本属性
定义文本的外观,比如文本的颜色、对齐方式、文本装饰、文本缩进、行间距
文本颜色color:
文本对齐text-align:
设置元素内的文本内容的水平对齐方式
文本装饰text-decoration:
适用场景:去掉超链接的下划线
a{
text-decoration:none;
}
文本缩进text-indent:
用来指定文本的第一行的缩进,通常是段落的首行缩进
行间距line-height:
设置行高,控制行与行之间的距离
文本高度不变,改变的是上下间距,多余的行高上下间距平分
(行高标尺测量行间距)
文本属性总结:
5.css的引入方式
行内样式表(行内式)、内部样式表(嵌入式)、外部样式表(链接式)
内部样式表:
一般放在head标签里,方便控制整个面页面的元素 ,代码结构清晰。并没有实现结构与样式的完全分离
行内样式表:
适合简单样式
外部样式表:
css文件里只有样式没有
再head标签里引用css文件
css引入方式总结:
优先级:行内样式最高