HTML-day04

最新推荐文章于 2024-04-26 22:18:52 发布

AzheCurry

最新推荐文章于 2024-04-26 22:18:52 发布

阅读量122

点赞数 1

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/weixin_46152224/article/details/111637228

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS层叠样式表，包括选择器的种类（标签、类、ID）、样式的使用方式（行内、内部、外部）、选择器的组合方式以及属性选择器的用法。内容涵盖了CSS的基础和进阶概念，旨在帮助读者理解如何控制网页元素的样式和布局。

摘要由CSDN通过智能技术生成

HTML-day04

CSS 层叠样式表

CSS(Cascading Style Sheets) 层叠样式表：一种用来表现 HTML 等文件样式的计算机语言；网页的表现统一，容易修改。CSS 能够对网页中元素位置的排版进行像素级精确控制；HTML 和 CSS 一起使用实现：内容与表现分离。HTML 是用于展示网页内容的；CSS 是用来给网页“穿衣服”的。

一、选择器

标签选择器
选中 HTML 标签。相当于重新定义标签的默认样式。
类选择器
选中指定的类标签。可定义一次多次使用。一个标签可同时引入多个类样式：<p class="warn small" >段落内容
id选择器
选中指定的 id 标签。通常页面中的 id 标签是唯一的。

二、样式的三种使用方式

行内样式表
使用 style 属性定义在标签上
内部样式表
使用 style 标签定义在当前 HTML 页面内部,一般在head标签内
外部样式表
将样式定义在外部 *.css 文件中，通过 link 标签或者 @import指令导入本页面。
链接式与导入式的区别:
- link 方式，导入时会停止 HTML 页面解析，直到 css 文件导入之后，才继续解析；
- import 方式，运行到 import 指令时，页面会继续解析(即：显示)；css 文件异步加载，直到加载后才会显示出样式效果。
样式的优先级
- 分别在不同位置(外部、内部、行内)定义的同名的样式(比如：标签、类样式名称相同)，遵从“就近原则”
- 名称不同，但重复选中的标签的样式，效果遵循“特殊者有限原则”(id>class>标签>*);选择器优于书写位置。
- 如果定义了 2 个类标签，其中包含相同的样式，但值不同。比如：定义类 .red{color:red} .green{color:green}。
  如果这两个类都作用于同一个标签上，比如：<p class="green red" >xxx</p>
  那么按照书写时的顺序(并非引用时的顺序)，后者优先。如上则颜色为 green。
- 更复杂的情况，可以通过计算标签被不同方式选中的次数来判断优先级。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style type="text/css">
    @import url(1.css);
        /*1.标签选择器：重新定义了标签的默认样式*/
         p{color: red; font-size: 30px;}
         /*2.类选择器*/
         .big_blue{color: blue; font-size: 35px;}
         /*3.id选择器*/
         #girl{color: yellow; font-size: 40px;}

    </style>
</head>
<body>
       <h2>普通选择器</h2> 
    <p>
        标签选择器
    </p>
    <p class="big_blue">
      class类选择器
    </p>
    
    <p id="girl" class="big_blue">
         id 标签选择器
    </p>
    <h2>行内样式表</h2>
    <p class="big_blue" style="color: purple; font-size: 45px;" >
         行内样式
    </p>
    <h2>3.外部样式表</h2>
    <ol class="big_green">
        <li>定义外部样式文件</li>
        <li>引入外部样式文件</li>
        <li>使用定义的选择器</li>
    </ol>
</body>

@charset "utf-8";
.big_green{color:green; font-size: 36px;}

在这里插入图片描述

三、选择器的组合方式

后代组合器
#header ul li：将不同选择器用空格隔开；子标签可以继承其祖先标签的某些样式，反之，不行;
交集选择器
li.red:不同选择器紧密挨在一起（注意不能将类或 id 选择器放在标签选择器之前#idli）
并集选择器
.red,li：适用于不同标签的样式相同时，将不同选择器用, 隔开。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层次选择器</title>
    <style type="text/css">
    /* 1.后代选择器 */
    ul li{color: green;}
    ol strong{color: yellow;}
    /* 2.孩子选择器 */
    ol>.apple{color: red;}
    /* 3.身后相邻兄弟选择器 */
    .vagetable+ul{font-size: 28px;}
    /* 4.身后兄弟选择器 */
    .fruit~ol{font-weight: bold;}
    </style>
</head>
<body>
    <h1>层次选择器</h1>
    <h2 class="fruit">1.水果</h2>
    <ol>
        <li class="apple">苹果</li>
        <li> <strong>香蕉</strong> </li>
        <li>梨</li>
    </ol>
    <h2 class="vagetable">2.蔬菜</h2>
    <ul>
        <li>萝卜</li>
        <li>白菜</li>
        <li>茴香</li>
    </ul>
</body>

在这里插入图片描述

四、属性选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
    <style type="text/css">
        /* 1.包含某值 */
        li[class]{color: green;}
        /* 2.等于某属性值 */
        li[class="apple"]{color: red;}
        /* 3.以某值为前缀 */
        li[class^="b"]{font-size: 28px;}
        /* 4.以某值为后缀 */
        li[class$="e"]{font-size: bold;}
        /* 5.包含某值 */
        li[class*="a"]{font-style: italic;}
    </style>
</head>
<body>
    <h1>属性选择器</h1>
    <h2>水果</h2>
    <ul>
        <li class="apple">苹果</li>
        <li class="banana">香蕉</li>
        <li class="berry">草莓</li>
        <li class="orange">橘子</li>
    </ul>
</body>