【入坑前端第四天】—— 零散日记

初识CSS

定义：层叠样式表，也叫级联样式表，简称样式表

作用：给元素添加样式

一、样式表分类:

内部样式表、外部样式表、行内样式

$1.内部样式表$

• 在head标签内部写style标签，然后通过css的语法，"属性名：属性值;"的形式为元素添加样式。

选择器 {
	属性名:属性值;
	属性名:属性值;
	...       ...
}

blackground-color : 背景颜色
color : 字体颜色
width : 宽度
height : 高度

• 所有块级元素，以及行内元素中的img与input可以设置宽和高

$2.外部样式表$

将元素样式的保存到一个独立的css文件中（注意：在css文件的第一行要添加上@charset “utf-8”），然后在html页面的head的标签中通过link标签引入外部样式表

<link rel = "stylesheet" href = "css文件地址">
stylesheet 代表外部样式表 
css文件地址可以为绝对路径也可以为相对路径

• 外部样式表实现了标签与样式分离，在开发中比较常用

$2.行内样式$

• 通过为标签添加style属性，来为元素添加样式

<div style = "background-color:burlywood;width:200px;height:200px">
	balabala
</div>

• 这里以div标签为例，对于style的多个属性值之间用分号隔开，这个元素样式只会应用到当前的标签中，对于其他的div标签不会产生影响。
• 因为行内样式没有实现标签与样式分离，所以一般不推荐使用。

二、选择器专题:

选择器的类型：元素选择器、id选择器、类选择器
通配符选择器、子代选择器、后代选择器、群组选择器、伪类选择器

$1.元素选择器$

应用：为某一类元素添加样式

p { 样式设置 }
body {样式设置}
div {样式设置}

$2.id选择器$

应用：通过#和id名为页面中的大版块添加样式(不常用)

<div id = "blink"> 这是一个测试 </div>
/*写在style标签中的部分如下：*/
#blink{样式设置}

• id选择器使用时一般是应用于某些大的版块，不会应用于小版块
• id与类名的命名规则：以小写字母开头，包含字母、数字、- 、_ 。
• id的命名具有唯一性，不能出现重复

$3.类选择器$

应用：通过.类名，为元素设置样式(常用)

<div class = "类名一 类名二 类名三">
/*写在style标签中的部分如下：*/
.类名{元素样式}

• 每一个元素都可以设置类名，类名可以重复
• 对于同一个元素可以设置多个类名，多个类名之间用空格隔开
• 在style标签中一般通过.类名来调用，也可以通过标签名.类名调用【不同之处会影响选择器的权值】

$4.通配符选择器$

应用：为页面中所有元素去掉边距

/*写在style标签中的部分如下：*/
*{
	margin : 0;
	dopping : 0 ;
}

• margin 代表内边距、dopping 代表外边距
• 这种将边距初始化为0的操作比较常用

$5.子代选择器$

应用：使用>作为连接符，前后为父子关系，可以统一的更改指定父元素中的所有子元素的样式

    <div class = "cup">
        <ul class = "milk">
            <li>原味奶茶</li>
            <li>珍珠奶茶</li>
            <li>香芋奶茶</li>
            <li>红豆奶茶</li>
        </ul>
    </div>
/*写在style标签中的部分如下：*/
<style>
        .milk > li{
            width:200px;
            height:200px;
            background-color: cyan;
            color:blueviolet;
       			 }
</style>    

当多个被包含的元素相同时，为他们定制样式如果都要起相同的类名很不方便。就可以选择子代选择器，为他们的父类起一个类名，通过包含标识符 “>” 子代标签，进而代替为只为其父标签起类名。

• 可以写多级父类的类名，也可以直接用子类的直接父类即可。
  例如：.cup.milk > li 可以直接写成 .milk > li
• 使用>作为连接符，前后为父子关系，可以统一的更改指定父元素中的所有子元素的样式

$6.后代选择器$

应用：也是为子代元素添加样式，前后满足祖先 后代即可，中间用空格分开

    <div class = "cup">
        <ul class = "milk">
            <li>原味奶茶</li>
            <li>珍珠奶茶</li>
            <li>香芋奶茶</li>
            <li>红豆奶茶</li>
        </ul>
    </div>
/*写在style标签中的部分如下：*/
<style>
    .cup li{
        属性名:属性值;
        属性名:属性值;
         ...  ...
            }
</style>

• 但是需要注意：这种操作会使cup中包含所有li元素都设置相同的样式；如果要为某些li元素设置单独的样式，则不推荐使用这种选择器，应该通过单独起类名的方式类完成。

$7.群组选择器$

应用：为多个元素样式相同的元素一起添加样式，彼此之间用逗号分开

<style>
  .box, .para, #wrap{
    样式设置;
}
</style>

• 需要注意：对于类名选择器，在style标签中前面用"."；如果是id选择器，要使用"#"

$8.伪类选择器$

应用：设置一些特定的元素样式

hover   鼠标移入效果
active   为鼠标按下瞬间效果
visited   为点击后的样式
link   为鼠标未点击前的样式

• 参考下面的伪类选择器：

.list li:hover{
	cover:#123456;
} 

• 更多伪类选择器参考：伪类选择器大全

$9.选择器的权值$

• 在一般情况下，使用后代选择器为某种元素设置统一的样式后，如果想为某个子元素设置单独样式（在整体样式中未定义的属性）是可以的，可以通过为这个元素设置一个单独的类名，在head标签中的style标签中进行元素样式设置。

<style>
    .grandfather li{
        width:200px;
        height:200px;
        backgroud-color:green;
        } 
     .son{
        color:red;
        }
</style>


<div class = "grandfather">
    <ul>
        <li>son_one</li>
        <li>son_two</li>
        <li class = "son">son_three</li>
    </ul>
</div>

• 但是如果设置的单独样式和之前已经定义过的样式发生了冲突，就可能导致后来设置的样式不起作用，这就涉及到了选择器的权值问题。
• 默认选择选择器的权值情况：

元素选择器 1
类选择器 10
id选择器 100
行内样式 1000
可手动更改权值 !important

• 选择器权值的计算方法：
• 除群组选择器之外，其它选择器都是将各个选择器权值加和即可；群组选择器要想对应的各个选择器分别计算权值。
• 当属性冲突时，会以权值大的为准；当权值相同时，以最新的定义为准
• 当手动更改某个属性的权值时，只需要在这个属性后、分号前添加!important即可，无需设置数值，系统会默认将这是属性认为是在相同属性中权值最高的