css
一,css
1,id选择器 #name{}
类选择器 .name{}
属性选择器
<p title="t"></p>
<p title="te"></p>
[title]{}
[title="te"]{}
[title~="title"] 模糊拼配,必须完全包含其中的内容
其中所谓的title可以是任意的内容,比如说href
id是唯一的,一般是先找到结构在渲染样式,不能结合使用
class 先处理好样式,在寻找结构
组合元素选择器:a.classname{} 可能有许多元素都是classname类型的,但是只针对于a标签中的classname类的起作用
多类选择器:
<p class="p1">this is my name</p> <p class="p2">this is my name</p> <p class="p1 p2">this is my name</p> .p1{ font-size: 200px; } .p2{ color: red; } .p1.p2{ font-style: italic; }
这样子第三个class为p1 p2,会拥有p1,p2所有的字体相关的特性,还可以通过.p1.p2来决定最终的特性。
后代选择器 a p strong{}可以选择后代,比如孙子直接a strong{}
子元素选择器 a>P>strong{} 只能一层层找
相邻兄弟选择器 p+a{} 选择p后面的a标签,要求他们与p有相同的父亲
2, css背景
background-attachment : fixed//背景图片是否随页面滚动
background-color
background-image:url("a.jpg")
background-position : 100px 200px
background-repeat
background-size
3, padding 内边距
4, 文本
color
text-align
text-indent:2em 缩进两个字符
text-transfrom
text-shadow :5px 5px 5px #ff0000;阴影效果
text-wrap 换行规则
5,字体
font-family 字体
font-size : 20px
fonr-style
font-weight 字体的粗细
6,链接
a:link{}
a:visited{}
a:hover{}
a:active{}
text-decoration :none 去掉链接样式(下划线等)
background-color
7,列表
list-style-type :disc;图标的样式
list-style-image :url("a.jpg");
list-style-position 没太有用
8,表格
border :1px solid blue; 设置外边框
border- collaspe :collaspe; 折叠边框
9,轮廓(给元素加上轮廓线)
outline-color
outline-style
outline-width