css层叠样式表

最新推荐文章于 2024-04-20 12:19:34 发布

pyh_yz

最新推荐文章于 2024-04-20 12:19:34 发布

阅读量208

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_41355482/article/details/98177798

本文深入探讨CSS层叠样式表的基本语法与应用，包括引入方式、常用样式、选择器类型及盒子模型等核心概念，通过实例讲解浮动、层级选择器等高级特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS层叠样式表

CSS 指层叠样式表 (Cascading Style Sheets)定义如何显示控制 HTML 元素,从而实现美化HTML网页。为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁。

基本语法

引入方式(3种):
1）. 内联式
<p style="font-size:12px;"></p>
2). 嵌入式
<style> p{ font-size:12px; } </style>
3). 外联式
<link rel='stylesheet' type='text/css' href='css/main.css'>

常用CSS样式

color 设置文字的颜色,如: color:red;
font-size 设置文字的大小,如:font-size:12px;
font-family 设置文字的字体,如:font-family:‘微软雅黑’;
font-style 设置字体是否倾斜,如:font-style:‘normal’;
设置不倾斜,font-style:‘italic’;设置文字倾斜
font-weight 设置文字是否加粗,如:font-weight:bold;
设置加粗 font-weight:normal 设置不加粗
font 同时设置文字的几个属性,写的顺序有兼容问题,建议按照如下顺序写:
font:是否加粗字号/行高字体;如: font:normal 12px/36px ‘微软雅黑’;
line-height 设置文字的行高,如:line-height:24px;
text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉
text-indent 设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进24px
text-align 设置文字水平对齐方式,如text-align:center 设置文字水平居中

基本选择器

1). 标签选择器
标签选择器,此种选择器影响范围大,建议尽量应用在层级选择器中。
2). id选择器 #id名称{样式}
通过id名来选择元素,元素的id名称不能重复,所以一个样式设置项只能对应于页面上一个元素,不能复用,id名一般给程序使用,所以不推荐使用id作为选择器。
在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <!--css样式声明-->
    <!--div是最简单的标签选择器-->
    <style type="text/css">
        div{
            border: 1px solid red;
            width: 700px;
            height:200px;

        }
        #box{
            border: 1px solid blue;
            width: 900px;
        }
    </style>
</head>
<body>

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<div id="box">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
</body>

3). class选择器 .类名称{样式}
通过类名来选择元素,一个类可应用于多个元素,一个元素上也可以使用多个类,应用灵活,可复用,是css中应用最多的一种选择器。
在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            border: 1px solid black;
            width: 50%;
            text-align: center;
            margin: 0 auto;
            margin-top: 50px;
        }
        #table-header{
            font-weight: bold;
            color: darkseagreen;
            font-size: 30px;
        }
        .odd{
            background-color: lightgray;
        }
        .odd:hover{
            font-size:120%;
            background-color: gray;
        }
    </style>
</head>
<body>
<table>
    <caption id="table-header">表格标签</caption>
    <tr>
        <td>1-1</td>
        <td>1-2</td>
    </tr>
    <tr class="odd">
        <td>1-1</td>
        <td>1-2</td>
    </tr>
    <tr class="odd">
        <td>1-1</td>
        <td>1-2</td>
    </tr>
</table>
</body>

4). 组合选择器选择器1, 选择器2{ }
多个选择器,如果有同样的样式设置,可以使用组选择器
5). 层级选择器: ul li{ } ul .page{ } ul #page{}
主要应用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用,减少命名,同时也可以通过层级,防止命名冲突。
6). 伪选择器: li:hover{ } li:after{ } li.before{ }
常用的伪类选择器有hover,表示鼠标悬浮在元素上时的状态,伪元素选择器有before和after,它们可以通过样式在元素中插入内容。

盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
举例：
paddding: 内边距
margin:外边距
border:边框
paddding-top:
paddding-bottom:
padding: 0px 2px 3px 9px; (上，右，下，左)
padding: 0px 2px, 3px(上, 左右, 下)
padding: 0px 2px(上下, 左右)

CSS浮动

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
元素怎样浮动?

Float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边：
设置浮动: float:right|left;
取消浮动: clear:right|left|both;

举个案例：
在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box, img {
            width: 180px;
        }
        .box {
            border: 2px gray solid;
            float: left;
            margin: 5px;
            padding-bottom: 10px;
        }
        .detail {
            font-size: small;
            padding: 8px;
            height: 20px;
            overflow: auto;
        }
        .clear{
            clear: left;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="image">
        <img src="img/timg.jpg">
    </div>
    <div class="detail">
        天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，
        灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。
        元始天尊启动了天劫咒语，3年后天雷将会降临，摧毁魔丸。
    </div>
</div>
<div class="box">
    <div class="image">
        <img src="img/timg.jpg">
    </div>
    <div class="detail">
        天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，
        灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。
        元始天尊启动了天劫咒语，3年后天雷将会降临，摧毁魔丸。

    </div>
</div>
<div class="box">
    <div class="image">
        <img src="img/timg.jpg">
    </div>
    <div class="detail">
        天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，
        灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。
        元始天尊启动了天劫咒语，3年后天雷将会降临，摧毁魔丸。
    </div>
</div>
<div class="box clear">
    <div class="image">
        <img src="img/timg.jpg">
    </div>
    <div class="detail">
        天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，
        灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。
        元始天尊启动了天劫咒语，3年后天雷将会降临，摧毁魔丸。
    </div>
</div>
<div class="box">
    <div class="image">
        <img src="img/timg.jpg">
    </div>
    <div class="detail">
        天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，
        灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。
        元始天尊启动了天劫咒语，3年后天雷将会降临，摧毁魔丸。
    </div>
</div>
</body>