样式
内部样式
写在</head>上一行
写成<style> css选择器{css样式} </style>
追求结构(html)、表现(css)、行为(js)相分离
外部样式
文件的后缀是.css
要将外部css文件引入html文件中
写法:<link rel="stylesheet" href=""> 写在</head>上一行
外部样式表必须使用link标签的href属性引入到html页面
行内样式
直接给标签添加了style属性 “”内采用键值对的属性
例如<div style=“color:red;”></div>
css选择器
标签选择器
标签选择器:使用标签名作为选择器,只要是这个标签名的标签都会被选中
缺点是同名的标签无法做到差异化
类选择器
类选择器写法: .类名{属性名:属性值;}
一个类选择器可以被多个有需要的标签使用
一个标签可以有多个类名,多个类名用空格隔开
id选择器
写法: #id属性值{属性名:属性值;}
id属性值不能重复
同样的id选择器,在一个页面中只能使用一次
通配符选择器
可以查找页面当中所有的标签
写法 *{属性名:属性值;}
一般用来清除页面中某些默认的样式
尺寸和颜色
width:;宽
height:;高
background-color:;背景颜色
a链接,span标签 无法设置宽高
字体相关的样式
字体颜色:color:;
字体大小(字号):font-size:; 单位是px
字体倾斜:font-style: ; normal正常 italic倾斜
行高:line-height:; 数字+px 如果只有数字表示 当前字体大小的几倍
可以利用行高实现单行文本的垂直居中
字体:font-family:; 楷体
字体粗细:font-weight:; 填写100-700, 400为正常 700为加粗 或填bold(加粗)
复合的写法:font:; 一次对于多个字体相关的值
顺序要求font:是否倾斜 是否加粗 字体大小/行高 字体;
使用font属性后,字号和字体是必须书写的,其他的不书写表示使用默认的
文本缩进
文本缩进text-indent:1em; 1em表示当前一个字符的大小
文本对齐方式
文本水平对齐方式 text-align:; center居中 left/right 左/右
文本装饰线
text-decoration:; none表示没有装饰线 line-through删除线
underline下划线 overline上划线
改文字的颜色
1.color:关键色;
2. color:rgb(数字,数字,数字); (通过三元色调色)
3. color:rgba(数字,数字,数字,数字);最后一个数字表示透明度
0-1表示透明值,越靠近0越透明
4.background-color:#+16进制;
选择器
复合选择器
两个及两个以上的选择器
后代选择器:某个元素的所有后代元素 写法:父选择器 子选择器{ }
子代选择器:某个元素下面的子代元素(最近的子集) 写法:父类选择器>子类选择器{ }
并集选择器:一次性选中多个标签 ,多个选择器之间用逗号隔开
例如:div,p,span{ } 或 .one,p,span{ } (<div class="one"></div>)
交集选择器:选中同时满足多个条件的标签 ,并且选择器之间没有任何的间隔和符号
写法:选择器1选择器2{ } 两个选择器之间不需要任何东西
伪类选择器
表示选择元素的某个状态 写法:冒号+属性值
:hover 表示鼠标悬停时
a:link 表示(超链接)访问前
a:visited 表示(超链接)访问后
a:active 表示(超链接)访问时
想要全部使用需要顺序要求:LVHA (先link,再visited,再hover,最后active)
:checked 选择所有选中的表单元素
:disabled 选择所有禁用的表单元素
:empty 选择所有没有子元素的p元素
:enabled 选择所有启用的表单元素
:first-of-type 选择的每个p元素是其父元素的第一个p元素
:nth-child(数字) 选中某个元素下的子元素
例如:1. ul li:nth-child(3){ } 表示选中ul下的第三个li
2.p:nth-child(3){ } 表示选中p标签的父元素下的子元素,且第三个子元素为p标签
:first-child 父元素下的第一个子元素
:last-child 父元素下的最后一个子元素
:nth-child(2n+1) 奇数个
:nth-child(2n) 偶数个
:nth-of- type(1) 表示第一个p标签
:focus{ } 表示聚焦状态(选中状态)
属性选择器
写法:标签【属性=属性值】{ } (具有xx属性的xx标签)
标签【属性^=x】 以x为开头的标签
标签【属性$=x】 以x为结尾的标签
标签【属性*=x 】 含有x的标签
其他
兄+弟:紧挨着兄标签的下一个弟标签,并且具有相同的父元素
兄~弟:选取兄弟元素后面所有的相同元素,要求不必紧紧跟随并且是同一个父元素
伪元素选择器
写法: 标签::before{ content:“111”;} 表示在标签前加111
标签::after{ content:“111”;} 表示在标签后加111
css的特性
继承性:子集默认继承