css层叠样式表(级联样式表)cascading Style sheets 丰富文档外观,控制文档样式
在head加上<style type="text/css">样式表内容</style>
选择器:一个选择标签的过程
选择器{属性:值;}
属性 | 解释 |
width:20px; | 宽 |
height | 高 |
background-color | 背景颜色 |
font-size | 字体大小 |
text-align:left,center,right | 内容水平的对齐方式 |
text-indent | 首行缩进 |
基础选择器:
标签选择器 :(选择所有标签)
标签{属性:值;}
类选择器:(谁调用谁生效)
.自定义类名{属性:值;}
<p class='类名 类名(同时调用两种时这么写)'>
类名:不能纯数字或数字做开头和特殊符号和汉字和属性会值定义,可以用_
一个标签可以调用多个类选择器
多个标签可以调用用一个类选择器
ID选择器
#自定义类名{属性:值;}
<p id='类名'>
一个ID选择器在一个页面只能使用一次,两次及以上不符合W3C规范,js调用会出问题
一个标签可以调用一个ID选择器
一个标签可以调用一个ID选择器和类选择器
通配符选择器(不推荐)
*{属性:值;}*代表所有标签,给所有标签使用相同的样式。
复合选择器:两个及以上选择基础选择器通过不同方式连接一起。
交集选择器:(既满足标签又满足选择选择器才生效)
标签+类(ID)选择器{属性:值;}
<标签 ./id='类名'></标签>
后代选择器:(无限制隔代)重点
标签+空格+选择器{属性:值;}
<标签 ./id='类名'> <标签 ./id='类名'></标签>
</标签>
只要能代表标签,标签,类选择器,ID选择器自由组合。
子代选择器:
选择器>选择器{属性:值;}
选中直接下一代标签。
并集选择器选择器 ,选择器{属性:值;}
表达颜色的方式:
颜色名称;十六进制显示颜色0-9 a-f。#000000,前2红,中2绿,后2蓝;rgb(色值,色值,色值); RGB加色模式;rgba(alpha不透明度0-1)
文本属性和属性连写
属性:font-size:文字大小
font-weight:文字粗细 blod≈700,值100-900
font-family:微软雅黑文本字体
font-style:normal默认 / italic斜体
line-height:行高
属性连写:font:写值就可以
(例如: italic 700 16px/40px 微软雅黑)
按照顺序:font-style font-weight font-size(必写)/font-heigh font-family(必写)
文字的表达方式
直接写字体中文名称,写字体英文名称,unicode编码(f12→找到console→escape(‘字体’))
---------------------------------------------------------------------------------------------------------------------------------------------------------------------
三种样式表的写法
内嵌式写法:<head><style type='text/css'>样式表写法</head>----只作用于当前文件,没有真正的实现结构表现分离
外链式写法:head中<link rel=';stylesheet' href='1.css'>-----作用范围:当前站点,范围广,实现结构表现分离
行内样式表:<h1 style='属性:值'>----------作用范围:当前标签,范围小(不推荐)
标签分类(显示方式)
块元素 :典型div,h1-h6,p,ul,li。特点:独占一行,可设宽高。嵌套(包括)下,子块元素宽度(没有定义的情况下)和父块元素宽度默认一样。
行内元素:典型 span,a,strong,em。特点:在一行上显示,不能直接设置宽高,(由内容撑开宽度)
严格来说没有这个→行内块(内联)元素:典型input,img。特点:在一行显示,可以设置宽高。
元素之间的转换
块元素转行内元素 display:inline;转成行内元素,不能设置宽高(内容撑开)
行内元素转块元素 display:block; 转成块元素,可设置宽高。
块和行内元素转行内块元素 display:inline-block;在一行可定义宽高
样式表之层叠性
当多个样式作用于同一类(同一个)标签,样式发生冲突,总是执行后边的代码。(后边代码会层叠前面代码)
样式表之继承性
继承性发生前提:包含(嵌套)关系。文字所有属性可以继承
em=60
特殊:h系列不能继承文字大小,a标签不能继承文字颜色。
样式表之优先级
默认样式<标签选择器<类选择器<ID选择器<行内样式表<!important
0 1 10 100 1000 1000以上(便于理解)
在属性后面加!important-----优先级会变最高
优先级之权重会叠加
优先级的特点:继承权重为0
权重会叠加
链接伪类
a:link{属性:值} 与 a{属性:值} 超链接效果一样----默认状态 常用
a:hover{属性:值} ----鼠标放到链接上之后的状态 常用
a:visited{属性:值} ----链接访问后状态
a:active{属性:值} -----超链接激活状态,鼠标按上去不松手
a:focus{属性:值} -----获取焦点
链接的文本修饰text-decoration:none / underline不用下划线 / line-through删除线
背景属性
background-color:背景颜色(必须设置高度)
background-image:url(“图.jpg”)背景图片
background-repeat:背景平铺 no-repeat不平铺 / repeat平铺(默认)/ repeat-x / repeat-y
background-position:背景定位 left / right / center / top / bottom ----从浏览器出发
(只写一个方位值,另一个默认居中)。(写两个方位值,顺序没有要求)(写两个具体指,前面值为水平方向,后为垂直方向)
background-attachment:背景是否滚动 scroll滚动(跟着div动) / fixed固定(定位在浏览器)
背景属性连写(没有顺序要求)
background:red url(必写) no-repeat 10px 20px scroll
list-style:none清楚列表项符号
--------------------------------------------------------------------------------------------------------------------------------------------------------------