css查缺补漏1 - 爱码网

css可以写在哪里

1.和要装饰的标签写在一起
2.内部样式表(内嵌式)是写在head头部标签中，并且用style标签定义
3.外部样式表(外链式)
<head><link rel="stylesheet" href="commons.css"></head>
做到结构、样式、行为的分离

4.基本选择器

标签选择器:设置原有的标签们如:divs、pan标签、h标签
类选择器:把样式写到head里面，以.开头命名，对应的div里得有相同的名字
样式显示效果跟HTML元素中的类名先后顺序没有关系，与书写的上下顺序有关,多类名用空格隔开
id选择器:是唯一的，只能被使用一次，方便被找到一般被js用

5.字体设置

font-size:字号大小,常用单位:px
font-family:字体,宋体、微软雅黑
font-weight:字体粗细,b或strong让字体加粗,normal(400)、bold(700)
font-style:字体风格,i或em让字体变倾斜,normal取消倾斜;italic添加倾斜
font字体连写的基本语法:
选择器{font:font-style font-weight font-size/line-height font-family}
不需要的属性可以省略，但字体大小和类型必须保留

6.文本设置

color:字体颜色
line-height:行间距，一般比字体大7、8像素就行
text-align:水平对齐方式，例:让某标签内的文字居中对齐
text-indent:2em,1em就是一个字的距离。段落首行缩进
text-decoration:u或ins加下划线,s或del加删除线
none(取消装饰),underline(下划线),line-through(删除线)

7.复合选择器

后代选择器指的是所有后代,又称包含选择器,例如div p{},两者用空格隔开
子代选择器,用大于号隔开,子指的是亲儿子(直系亲属),例如ul li > a{}
交集选择器,用点号隔开,某标签.某class,既...又...(p.box-<p class="box"></p>)
并集选择器,用逗号隔开,一个占一行,适合-集体声明，相同样式，例如:div,p,span

8.链接伪类选择器

<style>
    {#未访问过的状态#}
    a:link{
        color: #3c3c3c;
        font-size: 25px;
        text-decoration: none;
        font-weight: 700;
    }
    {#访问过后的状态#}
    a:visited{
        color: orange;
    }
    {#鼠标经过时的状态#}
    a:hover{
        color: #f10215;
    }
    {#鼠标按下时的状态#}
    a:active{
        color: green;
    }
</style>
这四个如果要都写的话，那么顺序不能乱，lv-hao
但一般是这么写的：
a {
    color: #3c3c3c;
    font-size: 25px;
    text-decoration: none;
    font-weight: 700;
}
a:hover{
    color: #f10215;
}
.类名，然后TAB直接生成<div class="类名"></div>
input:属性，然后TAB直接生成<input type="属性" name="" id="">

a:hover