【JavaWeb】CSS基础知识：引入方式 选择器

目录

CSS引入

行内样式表

内部样式表

外部样式表

CSS选择器

基础选择器

标签选择器

类选择器

ID选择器

通配符选择器

复合选择器

后代选择器

子选择器

CSS引入

CSS的引入有三种，三种的优缺点各不相同。

行内样式表

    <!-- 行内样式表 -->
    <!-- 相当于标签的一个属性 -->
    <!-- 只对当前标签生效 -->
    <!-- 优先级较高，会覆盖其他样式 -->
    <p style="color: blue;">这是段落1</p>复制

缺点 : 不能写太复杂的样式 .  

内部样式表

    <!-- 内部样式表 -->
    <!-- 嵌入到html内部 -->
    <!-- 建议写道head里 -->
    <style>
        p {
            color: green;
        }
    </style>复制

优点 : 这样做能够让样式和页面结构分离 缺点 : 分离的还不够彻底 . 尤其是 css 内容多的时候 

外部样式表

    <!-- 外部样式 -->
    <!-- 把写好的CSS样式写到head -->
    <link rel="stylesheet" href="pStyle.css">复制

/* 针对p标签的外部样式 */
p {
    color: red;
}复制

优点 : 样式和结构彻底分离了 缺点 : 受到浏览器缓存影响 , 修改之后 不一定 立刻生效

CSS选择器

选择器就是选中HTML标签的东西。可以分为两大类。选择器通常写到head中。

基础选择器

针对的都是单一类型的标签。

标签选择器

能够把同种类型的标签都选出来，但是不能差异化选择。

    <!-- 标签选择器 -->
    <style>
    p {
        color: red;
    }
    div {
        color: aqua;
    }
    </style>
 
    <p>这是一个p标签</p>
    <div>div标签1</div>复制

类选择器

    <!-- 类选择器 -->
    <style>
        .bule {
            color: blue;
        }
    </style>
 
    <style>
        .size{
            font-size: 50px;
        }
    </style>
 
    <p>这是一个p标签</p>
    <div>div标签1</div>
    <div class="bule size">div标签2</div>复制

ID选择器

CSS 中使用 # 开头表示 id 选择器 id 选择器的值和 html 中某个元素的 id 值相同 html 的元素 id 不必带 # id 是唯一的 , 不能被多个标签使用 ( 是和 类选择器 最大的区别 )  

    <!-- id选择器 -->
    <style>
        #green {
            color: green;
        }
    </style>
 
    <p>这是一个p标签</p>
    <div>div标签1</div>
    <div class="bule size">div标签2</div>
    <div class="blue">div标签3</div>
    <div id="green">div标签4</div>复制

通配符选择器

    <!-- *选择器 -->
    <style>
        * {
            color: blueviolet;
        }
    </style>复制

复合选择器

通过上面的选择器相互组合构成复合选择器。

后代选择器

    <!-- 后代选择器 -->
    <!-- 写出想要选择的标签 -->
    <!-- 每个标签之前使用空格分隔 -->
    <!-- 选中的内部标签有子标签也会被选中 -->
    <style>
        ul li {
            color: red;
        }
    </style>
 
    <ul>
        <p>
            不会被选中
        </p>
 
        <li>
            aaa
        </li>
        <li>
            bbb
            <p>
                这个子标签就被选中了
            </p>
        </li>
        <li>
            ccc
        </li>
    </ul>复制

子选择器

    <!-- 子选择器 -->
    <!-- 只选下一个标签，不会选更深层次的标签 -->
    <style>
        ul>p {
            color: red;
        }
    </style>
 
    <ul>
        <p>
            只会选中这个
        </p>
 
        <li>
            aaa
        </li>
        <li>
            bbb
            <p>
                这个子标签不会被选中
            </p>
        </li>
        <li>
            ccc
        </li>
    </ul>复制

还有很多选择器没有介绍，可以在这里看CSS 参考手册 (w3school.com.cn)

有什么错误评论区指出，希望可以帮到你。