每日学到 37 - HTML标签

目录

行内样式

内部样式

外部样式

样式优先级

标签选择器

class选择器

id选择器

基本选择器的优先级

层次选择器

属性选择器

span标签

字体样式

---

行内样式

    行内样式：通过在标签内使用style属性来设置样式，样式的语法--》属性名:属性值;
        在style标签内可以写多个样式
        行内样式只针对当前所在的标签有效果

内部样式

    <style>
        /* 我们需要给p标签设置样式 */
        p {
            color: red;
            font-size: 40px;
        }
</style>

外部样式

    将多个页面中相同的样式提取出来，写在一个后缀名为css的文件中
    然后HTML页面中只需要引入这个外部样式文件就可以实现样式的使用
    引入外部样式文件的两种方式
        方式一：@import url(样式文件的路径); --》此代码需要写在style标签内
        方式二：<link rel="stylesheet" href="样式文件的路径">  --》此代码直接写在head标签内

样式优先级

    在一个标签上，同时作用了行内样式、内部样式和外部样式中的相同属性，显示样式的顺序：就近原则
    在行内样式、内部样式、外部样式中有不同的属性，则会叠加显示

标签选择器

    通过标签名来选择网页中的元素,标签选择器会将网页中相同的标签设置相同样式

class选择器

    class选择器，使用“.选择器名称”来表示选择器,选择器名称不要使用数字开头，做到见名知意
        class选择器的样式写法与前面所说的标签选择器样式写法一下
            .选择器名称{
                    属性名:属性值;
                    .....
                    属性名:属性值;
            }
    如何将类选择器描述的样式作用在元素上？
        在标签中使用class属性引入这个类选择样式
        <标签名 class="类选择器名称">.....</标签名>
    注意：类选择器可以被不同的标签重复使用

id选择器

    id选择器，使用“#选择器名”表示id选择器，选择器名称不要使用数字开头，做到见名知意
        #选择器名{
                    属性名:属性值;
                    ......
                    属性名:属性值;
        }
    id选择器的样式如何引入到元素里？
        在标签内通过id属性类引入id选择器书写的样式
            <标签名 id="选择器名">......</标签名>
    注意：id选择器具有唯一性，只能在一个标签内使用id选择器,在JavaScript中通过id属性名称来获取元素的时候，只能获取一个，所以要保证id选择器在标签中只使用

基本选择器的优先级

    基本选择器优先级：行内样式>id选择器>class选择器>标签选择器
    可以在样式后面添加 !important来将样式优先级提升到最高

层次选择器

    并集选择器，多个选择器的样式一样，可以合并写,不同选择器之间使用,隔开
    后代选择器
        选择body标签的所有后代元素p
            body p{ }
    子代选择器
        选择body标签的所有子代元素p
            body>p{ }
    相邻兄弟选择器
        选择紧跟在类名为active元素后面的兄弟元素p
            .active+p{ }
    通用兄弟选择器
        选择类名为active元素后面的所有p兄弟元素
            .active~p{ }

属性选择器

    选择具有id属性的a标签,不管id属性值是什么
        a[id]{ }
    选择具有id属性并且id属性值为first的a元素
        a[id=first]{ }
    选择具有href属性并且href属性值是以http开头的a元素
        a[href^=http]{ }
    选择具有class属性并且class属性值是以item结尾a元素
        a[class$=item]{ }
    选择具有class属性并且class属性值中包含ink的a元素，不管这个ink是在属性值的最前面还是在中间，还是在最后，只要包含ink就会被选中
        a[class*=ink]{ }

span标签

    span标签的作用：结合css样式能让某几个文字或者某个词语凸显出来，span标签本身没有特殊样式

字体样式

    font-family:设置字体类型，可以设置英文字体，也可以设置中文字体，如果同时设置英文字体和中文字体，英文字体需要在前面
    font-family:"仿宋" ;
    font-size:设置字体大小
    font-size: 50px;
    font-style:设置字体风格，主要用来设置字体是否倾斜显示
    font-style: oblique;
    font-weight:设置字体的粗细
    font-weight: 100;
    上面设置字体样式是分开来写的，也可以合并写，使用font属性来写
    font: oblique 100 50px "仿宋";
    字体属性的顺序：字体风格→字体粗细→字体大小→字体类型