1、css固定格式注意点:
1.style标签必须写在head标签的开始和结束标签中
2.style标签的type默认就是text/css,分号 冒号不能省略,但在最后一个可以是省略的
2、文字属性注意点:
1.规定文字的样式:font-family:取值为:normal(默认)italic(倾斜)
2.规定文字的粗细:bold加粗 bolder比加粗更粗 lighter细线 数字取值:100——900(用的比较少)
3.设置文字的大小 font-size: 注意点:通过设置大小一定要带单位
4.如果设置的字体不存在,那么系统会使用默认的字体来显示
3.文字属性其他注意点:
1.如果想给中文和英文设置不同的字体怎么办?
2.但凡是中文字体里面都包含了英文字体,但凡是英文字里面都没有包含中文字体
3.中英文字体同时存在的写法:英文字体必须写在前面,中文字体写在后面,例如:font-family:"Times new Roman","华文行楷","楷体";
4.文字属性也是可以缩写的:在缩写格式中有些值可以省略,还可以交换位置,但是size 和 family不能省略而且位置不能交换,size在前,family在后,且这两个属性必须放在最后面。例如:font:italic bold 10px "楷体";
4、文本属性
1.文本装饰的属性:格式:text-decoration(决定是否有下划线): underline;取值:underline line-through overline none
2.文本水平对齐的属性:格式:text-align(决定文本在水平方向的位置) 取值:left(默认值) right center
3.文本垂直对齐的方式:可以通过设置line-height属性来控制,但是这只能处理一行文字的显示,如果是多行文字,这是我们只能通过margin和padding属性来控制文字的垂直对齐的方式
4.文本缩进的属性:text-indent:2em;最常见的取值就是2em
5、颜色控制属性
1.在CSS中如何通过color属性来修改文字颜色.但是取值有一下几种情况:
1.1:英文单词--->一般情况下,常见的颜色都有对应的英文单词,但是英文单词能够表达的颜色是有限的,也就是说不是所有的颜色都能通过英文单词来表达,企业开发中一般用来做调试
1.2:rgb--->rgb其实就是三原色,其中的每一个取值0——255,0代表不发光,255代表发光最亮
1.3:rgba--->CSS3才推出来的,a的意思是透明度,取值0-1,值越小越透明
1.4:十六进制--->在前端开发中,通过十六进制控制颜色,其实就是通过rgb来控制颜色的,这也是在开发中使用最多的方式,每两位代表rgb中的一个数字,在十六进制中逢十六进一,取值0——F,
1.5:十六进制缩写--->css提供的简写格式,只要十六进制中每两位的值是相同的就可以简写,但是如果当前对应的颜色的两位数字不同就不能简写(123456),如果两位相同的数字不是属于同一个颜色的,也不能简写(#122334)
1.6:灰色的调制:三种三元色的取值一样就是灰色,取值越小,偏黑色,取值越大偏白色
6、标签选择器
1.什么是标签选择器:作用:根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性。
2.标签选择器选中的是界面中所有的标签,而不能单独选中一个
3.标签选择器无论标签藏的多深都能找到它
4.格式:p{
width:200px;
height:200px;
background:red;
}
7、id选择器
1.什么是id选择器:根据指定的id名称找到对应的标签,然后设置属性
2.每个HTML标签都有一个id属性,也就是说每个标签都可以设置id
3.在同一界面中id的名称是不能重复的
4.在编写id选择器是一定要加一个#,否则无效
5.id的规范:只能有字母 数字 下划线,id名称不能以数字开头,在企业开发中一般以字母开头
6.id的名称不能使HTML的标签名称
7..在企业开发中,一般情况下如果仅仅是为了设置样式,我们不会用id,因为在每个前端开发中,id是留给JS使用的
8.id选择器的格式
#box{
width: 200px;
height: 200px;
color:blue;
}
8、vertical-align:属性设置元素的垂直对齐方式,注意只有不同的两个行内元素设置才会有明显的效果
9、类选择器
1.根据指定的类名称找到对应的标签,然后设置属性,类名就是专门用来控制css样式的
2.在HTML中一个标签可以同时绑定多个类名
3.id选择器和类选择器的区别:
3.1:id相当于人的身份证不可以重复
3.2:class相当于人的名字可以重复
3.3:一个标签只能用一个id名称,但是一个标签可以用多个class名称
3.4:id选择器是以#开头,class选择器是以.开头的
3.5:在企业开发中到底使用id选择器还是class选择器:id一般情况下是给js使用的,不到特殊情况不用
3.6:在企业开发中一个开发人员对类的使用可以看出这个开发人员的技术水平
3.7:一般情况下,企业开发中要注重冗余代码的抽取可以将一些公共的代码抽取到一个选择器中
10、子元素选择器
1.子元素选择器的作用:就是找到指定标签中特定标签的元素
2.子元素选择器只会去查找儿子,不会去查找孙子
3.子元素选择器可以一直延续下去#indentity>p
//stlyle部分
<style>
#indentuty>p{
background:red;
}
#indentity>ul>li{
color:blue;
}
</style>
//html部分
<div id="indentity">
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<ul>
<li><p>我是段落</p></li>
</ul>
<p>我也是儿子标签</p>
</div>
11、后代选择器
1.后代选择器的作用:找到所有标签的后代标签,设置属性
2.注意点:
2.1:后代选择器不仅仅可以选择儿子也可以是孙子
2.2:后代选择器不仅仅可以使用标签名称,也可以使用其他的选择器 可以是id 也可以是类名
3.后代选择器的格式
//style部分
<style>
#indentity p{
color:red;
}
</style>
//html部分
<div id="indentity">
<p>我是一个段落</p>
<p>我是一个段落</p>
<ul>
<li>
<p class="ccc">我是段落</p>
</li>
</ul>
</div>
4.后代选择器和子元素选择器之间的区别:
4.1:后代选择器使用空格做链接符号,而我们的子元素选择器使用>作为链接符号
4.2:后代选择器会选中指定标签中的所有相同标签,而子元素选择器不会这样选择,他会选中特定的儿子标签
12、交集选择器
1.交集选择器:就是给选中标签中相交的那一部分标签添加属性
2.选择器与选择器之间不能加任何东西
3.选择器可以使用 标签名称 id名称 class名称,它只能用在同一个标签中,例如这样是不行的#identity.para2
13、并集选择器
1.并集选择器:给所有选择器选中的标签添加属性
2.并集选择器中间用逗号链接,它主要用在不同标签之间来给标签添加属性
3.格式:#box1,#box2{
width:200px;
height:200px;
background:red;
}
14、兄弟选择器
1.兄弟选择器只能选择同级的标签
2.相邻兄弟选择器css2
作用:给指定选择器后面紧跟的那个选择器选中的标签设置属性,只能选中一个
格式:选择器1+选择器2
注意点:相邻兄弟选择器只能选择紧跟后面的标签,
3.通用兄弟选择器css3
作用:给指定选择器后面的所有选择器设置属性
格式:选择器1~选择器2
注意点:无论后面有没有被隔开都会被选中的,会选中多个标签
4.例如
<style>
h1+p{
color:red;
}
h1~p{
color:blue;
font-size: 30px;
font-family: "楷体";
}
</style>
//HTML部分
<h1>我是标题</h1>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<h1>我是标题</h1>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
15、序列选择器
1.css3中最具代表的序选择器
2.同级别的第几个
2.1:p:first-child:选中同级别的第1个
2.2:p:last-child;选中同级别中的最后一个
3.同类型的第几个
3.1:p:first-of-type取出同类型中的第一个标签
3.2:p:last-of-type取出同类型中的最后一个标签
3.3:p:nth-child(odd):选中同级别中的所有奇数标签
3.4:p:nth-child(even):选中同级别中的所有偶数
3.5:p:nth-child(xn+y) n是从0开始自增的,但是x y是自己设置的
16、属性选择器
//例如:
input[type='password']{
width:200px;
height:200px;
}
img[alt='tianjin']{
width:300px;
height:300px;
}
注意点:属性选择器在开发中用的不是太多的,其余的属性可以查看w3c官方文档了解