Web前端之CSS层叠式样表

最新推荐文章于 2023-12-11 20:39:07 发布
最新推荐文章于 2023-12-11 20:39:07 发布
阅读量520 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/C_teacher/article/details/104374413
版权

文章目录

01 CSS简介

CSS 指层叠样式表 (Cascading Style Sheets)定义如何显示控制 HTML 元素,从而实现美化HTML网页。

优势
为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁。

02 基本语法

格式： 选择器{属性:值;属性:值;属性:值;…}
在这里插入图片描述
CSS页面引入方式

  • 内联式:通过标签的style属性,在标签上直接写样式。
    在这里插入图片描述
  • 嵌入式:通过style标签,在网页上创建嵌入的样式表。
    将写好的标签嵌入到html中
    在这里插入图片描述
  • 外联式:通过link标签,链接到外部样式表到页面中。

在这里插入图片描述
html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    嵌入式：
    CSS样式的声明:写在head标签里面
    1、div是最简单标签选择器
    -->
    <!--    <style type="text/css">-->
    <!--        div{-->
    <!--            border: 1px solid red;width: 500px;height: 200px;-->
    <!--        }-->
    <!--    </style>-->
<!--    外联式：通过link标签,链接到外部样式表到页面中。
rel  关联的是什么   stylesheet
type  类型是文本的css样式
href  css式样所在的位置
-->
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div>
    <ul>1</ul>
    <ul>2</ul>
    <ul>3</ul>
    <ul>4</ul>
</div>

<div>
    <ul>1</ul>
    <ul>2</ul>
    <ul>3</ul>
    <ul>4</ul>
</div>
</body>
</html>

CSS式样需要建立stylesheet文件来写CSS式样

/*CSS式样的内容*/
div {
    border: 1px solid red;
    width: 500px;
    height: 200px;
}

03 常用的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 设置文字水平居中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        /*<!--    去掉a标签超链接的下划线-->*/
        a{
            text-decoration: none;
        }
        /*<!--    去掉无序列表前的点-->*/
        ul>li{
            list-style: none;
            line-height:50px;
        }
    </style>
<!--    去掉无序列表前的点-->

</head>
<body>
<a href="#">
    百度一下
</a>
<ul>
    <li>1</li>
    <li>2</li>
</ul>
</body>
</html>

CSS颜色表示法

css颜色值主要有三种表示方法:

  • 1、颜色名表示,比如:red 红色,gold 金色
  • 2、rgb表示,比如:rgb(255,0,0)表示红色
  • 3、16进制数值表示,比如:#ff0000 表示红色,这种可以简写成 #f00

基本选择器

标签选择器

标签选择器,此种选择器影响范围大,建议尽量应用在层级选择器中。举例:
在这里插入图片描述

id选择器

通过id名来选择元素,元素的id名称不能重复,所以一个样式设置项只能对应于页面上一个元素,不能复用,id名一般给程序使用,所以不推荐使用id作为选择器。举例:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            border: 1px solid red;
            width: 500px;
            height: 200px;
        }

        /*    id选择器的设置样式，#id 名称*/
        #box {
            border: 1px solid blue;
            width: 300px;
        }
    </style>


</head>
<body>
<div>
    <ul>1</ul>
    <ul>2</ul>
    <ul>3</ul>
    <ul>4</ul>
</div>

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

<div>
    <ul>1</ul>
    <ul>2</ul>
    <ul>3</ul>
    <ul>4</ul>
</div>
</body>
</html>

在这里插入图片描述

类选择器

通过类名来选择元素,一个类可应用于多个元素,一个元素上也可以使用多个类,应用灵活,可复用,是css中应用最多的一种选择器。举例:在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        table{
        /*    标签选择器*/
            border: 1px solid black;
            width: 50%;
            text-align: center;
        /*    如果是块级元素 居中：margin: 0 auto
              如果是行内元素 居中：text-align: center
        */
            margin: 0 auto;
        }
    /*    类选择器*/
        .odd{
            background: darkgray;
        }
        .odd:hover{
        /*    当鼠标经过odd类对应的标签时，元素的样式*/
        /*    是原来字体的1.2倍*/
            font-size: 120%;
            background: dimgrey;
        }
        #table-label{
            font-weight: bolder;
            color: darkgreen;
            font-size: 30px;
        }
    </style>
</head>
<body>
<table>
    <caption id="table-label">表格标签</caption>
    <tr class="odd">
        <td>1-1</td>
        <td>1-2</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
    </tr>
    <tr class="odd">
        <td>3-1</td>
        <td>3-2</td>
    </tr>
    <tr>
        <td>4-1</td>
        <td>4-2</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

层级选择器

主要应用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用,减少命名,同时也可以通过层级,防止命名冲突。
举例:

在这里插入图片描述
在这里插入图片描述

组选择器

多个选择器,如果有同样的样式设置,可以使用组选择器。举例：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1,.box2,.box3{
        /*    组选择器用逗号分割
        多个选择器如果有同样的样式设置，可以使用组选择器
        */
            width:100px;
            height:100px;
            border: 1px solid black;

        }
        .box1{
            background-color:green ;
        }
        .box2{
            background-color: darkgray;
        }
        .box3{
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="box1">
    div1
</div>
<div class="box2">
    div2
</div>
<div class="box3">
    div3
</div>
</body>
</html>

在这里插入图片描述

伪类及伪元素选择器

常用的伪类选择器有hover,表示鼠标悬浮在元素上时的状态,伪元素选择器有before和after,它们可以通过样式在元素中插入内容。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1,.box2,.box3{
        /*    组选择器用逗号分割
        多个选择器如果有同样的样式设置，可以使用组选择器
        */
            width:100px;
            height:100px;
            border: 1px solid black;
            margin: 0 auto;

        }
        .box1{
            background-color:green ;
        }
        .box2{
            background-color: darkgray;
        }
        .box3{
            background-color: blue;
        }
        .box1:hover{
            font-size: 30px;
        }
        .box2:before,.box1:before{
            /*before:在所有选择的标签前添加信息*/
            content: '添加行首信息';
        }
        .box3:after{
            /*after:在所有选择的标签后添加信息*/
            content: '添加尾部信息';
        }
    </style>
</head>
<body>
<div class="box1">
    div1
</div>
<div class="box2">
    div2
</div>
<div class="box3">
    div3
</div>
</body>
</html>

在这里插入图片描述

盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
在这里插入图片描述

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box{
        /*设置内边距为25px*/
            padding: 25px;
            /*设置外边距*/
            margin:100px auto;
            /*指定盒子宽度*/
            width: 400px;
            border: 25px solid green;
        /*    设置文本居中*/
            text-align: center;
        }

    </style>
</head>
<body>
<div class="box">
    盒子模型
</div>
</body>
</html>

在这里插入图片描述
项目案例:哪吒海报

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box, img{
            width: 512px;
        }
        .box{
            border: 2px gray solid;
            margin: 30px auto;
            
        }
        .detail{
            font-size: 12px;
        /*    设置内边距*/
            padding: 5px;
            margin: 30px auto;
        }

    </style>
</head>
<body>
<div class="box">
    <div class="哪吒">
        <img src="哪吒.jpg">
    </div>
    <div class="detail">
        《哪吒之魔童降世》是由霍尔果斯彩条屋影业有限公司出品的动画电影，由饺子执导兼编剧，吕艳婷、囧森瑟夫、瀚墨、陈浩、绿绮、张珈铭、杨卫担任主要配音 [1]  。
该片改编自中国神话故事，讲述了哪吒虽“生而为魔”却“逆天而行斗到底”的成长经历的故事。该片于2019年7月26日在中国内地上映 [2-3]  。
2019年9月6日，第十二届中国国际漫画节开幕式暨第16届中国动漫金龙奖颁奖大会于广州举行。《哪吒之魔童降世》获得最佳动画长片奖金奖、最佳动画导演奖、最佳动画编剧奖、最佳动画配音奖 [4]  。
2019年10月8日，电影《哪吒之魔童降世》将代表中国内地参选2020年第92届奥斯卡最佳国际影片（原最佳外语片）。 [5]  《哪吒之魔童降世》被授予推介委员会特别荣誉推介电影。
    </div>
</div>
</body>
</html>

在这里插入图片描述

06 CSS浮动

什么是 CSS Float（浮动）？
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素怎样浮动?

  • 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
  • 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
  • 浮动元素之后的元素将围绕它。
  • 浮动元素之前的元素将不会受到影响。
  • 如果图像是右浮动，下面的文本流将环绕在它左边：

浮动案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            /*清除所有标签的内外边距*/
            padding: 0;
            margin: 0;
        }
        .container{
            width: 50%;
            border: 1px solid gray;
            /*设置行间距*/
            line-height: 150%;
        }
        .header,.footer{
            padding: 8px;
            background-color: gray;
            /*设置字体颜色*/
            color: white;
        /*    清除左浮动*/
            clear: left;

        }
        .left{
            border: 1px solid black;
            float: left;
            width: 20%;
            height: 200px;
            padding: 16px;
            padding-left: 20px;
        }
        .content{
            border: 1px solid black;
            width: 71%;
            float: left;
            height: 200px;
            padding: 16px;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="header">西部开源技术中心</div>
    <div class="left">
        <ul>
            <li>Python</li>
            <li>java</li>
            <li>C++</li>
            <li>node.js</li>
        </ul>
    </div>
    <div class="content">
        <p>“没有规矩，不成方圆”，教育是最严谨的一项工作，不
            能有半点敷衍与搪塞。我们的讲师经过层层面试，从助教开始，经过无数次试讲才能为你传授知识。我们严禁你迟到早退，无故请假，不交作业，只有规范好自己，才有能力去运维一个系统。</p>
    </div>
    <div class="footer">
        2020-2-19
    </div>
</div>
</body>
</html>

在这里插入图片描述
分页案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            margin: 0 auto;
            width: 50%;
        }
        .pagination>li{
        /*    删除无序列表前的标记*/
            list-style: none;
        /*    将块级元素转换为行内块元素*/
            display: inline-block;
        /*    添加边框*/
            border: 1px black solid;
        /*    设置宽度*/
            width: 50px;
        /*    设置字体居中*/
            text-align: center;
        /*    设置字体大小*/
            font-size: 16px;
        /*    设置内边距:上下为5px,左右为10px*/
            padding: 5px 10px;
        /*    设置背景颜色*/
            background-color: gold;
        /*    设置外间距*/
            margin: 5px;

        }
        /*    删除a标签的下划线*/
        .pagination>li>a{
                text-decoration: none;
            }
        .pagination li:hover{
            background-color: darkgoldenrod;
            font-size: 150%;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>分页案例</h1>
    <ul class="pagination">
        <li><a href="#">上一页</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">18</a></li>
        <li><a href="#">19</a></li>
        <li><a href="#">20</a></li>
        <li><a href="#">下一页</a></li>
    </ul>
</div>
</body>
</html>

在这里插入图片描述

C_teacher
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS层叠样式表之CSS解析机制的优先级及样式覆盖问题探讨
01-21
样式的优先级 多重样式（Multiple Styles）： 如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。 一般情况下，优先级如下： （外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style。 有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。 示例如下： 复制代码代码如下: <head> <style type=”text/css”> /* 内部样式 */ h3{color:green;} </style> <!– 外部样式 style.cs
css的层叠样式
D2961953033的博客
11-26 4172
1 css的层叠样式有四种： 行内样式 内嵌样式 外链样式 导入样式 1.1行内样式 行内样式又叫做标签样式，它是在标签里面加上style属性。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css...
CSS（层叠样式表）
小小Bug编写员
03-23 1601
CSS非常灵活，可以嵌入HTML文档中（写在head文件中），也可以是一个单独的外部文件，如果是独立文件，必须以.css为后缀名。 width：100px（像素）--宽 height：100（像素）--高 background-color--背景色 想让文字在垂直方向上居中，设置“行高＝元素高度” 一、基础选择器 1.标签选择器 HTML标签名称作为选择器，按标签名称分类，选择页面中某一类标签 语法： 标签名{ 属性1：属性值1; ...
CSS层叠样式表
jcf52的博客
04-20 3562
一.css 介绍 层叠样式表，是一种样式表语言，用来描述HTML和XML文档的呈现。随着HTML的发展，为了满足面设计者的要求，HTML添加了很多显示功能，但是随着这些功能的增加，使得HTML越来越杂乱，HTML 页面也越来越臃肿，CSS便随之诞生，CSS 用于简化HTML标签，把关于样式部分的内容提取出来，进行单独的控制，使结构与样式分离开发。 CSS 是以HTML为基础，设置网页的外观显示样式，如字体、颜色、背景的控制及整体的布局等，和HTML 类似，CSS也不是真正的编程语言，甚至不是标记语言。..
css层叠样式总结
cj1555640的博客
07-28 1704
java学习第四天:css知识点总结
WEB前端CSS层叠样式表思维导图（Xmind）
06-23
本人网页制作课程所用的思维导图，包含了所有web前端技术的概念和知识点，比较适合学生、初学者建立一个初步的思维模型，另外本人还有html标语言的思维导图，欢迎大家下载查看。
自学前端CSS层叠样式表
最新发布
12-13
自学前端CSS层叠样式表
自学web前端之CSS样式书写
01-08
之前介绍过修饰网页需要用到css样式，但是在哪里写css样式呢？这篇帖子就介绍如何书写。 本篇帖子的目录 1.内部CSS样式代码书写 2.外部CSS样式代码书写 css样式书写 用html写出的网页内容，简单而有单一，不是很好看...
Web前端学习之CSS课件
01-21
CSS相关技术文档-例如CSS基础：类选择器。就是建立一个类，并为这个类定义一些样式，在需要应用的标签内以class=“类名”的形式套用，例如： .student{color:#00f;} “student”>张三 类名的前边一定要加上一个...
3D层叠样式叠加切换特效.zip
07-04
3D层叠样式叠加切换特效韩国网页风格的flash xml图片。
CSS规则层叠时的优先级算法
10-30
CSS 规则的优先级是Web前端开发人员必须理解的一个概念，我们常用的添加样式的方法有4种。
CSS--层叠样式表
weixin_45398401的博客
08-23 792
注：浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。（因为浮动之后会脱标）
css层叠样式基本使用
m0_60463187的博客
12-11 153
（Cascading Style Sheet，层叠样式表) 简称css 定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。“”“CSS就是对HTML标签做样式的，让不好看的变得更加的好看”“”选择器 {属性名1:属性值;属性名2:属性值;属性名3:属性值;属性名4:属性值;属性名5:属性值;CSS注释:/*这是注释*/HTML注释：-- 这是注释 -->
【前端学习-初阶-CSS】CSS层叠样式表（一）
qq_48234463的博客
02-27 455
前端学习-初阶
CSS - 层叠样式表
weixin_47790139的博客
12-13 375
文章目录前言CSS1.1、概述1.2、用法1.3、创建样式1.3.1、外部样式表（外联式）1.3.2、内部样式表（内联式）1.3.3、内联样式（行内式）第二章 CSS选择器2.1、标签名选择器2.2、class选择器2.3、id选择器2.4、分组选择器2.5、属性选择器第三章 CSS常见样式3.1、背景样式3.2、文本样式3.3、字体样式3.4、链接样式3.5、列表样式3.6、表格样式3.7、轮廓样式第四章 CSS盒子模型4.1、概述4.2、内边距4.3、边框4.4、外边距 前言 本人发布的一系列资料都是学
CSS之：样式层叠
YJXselect的博客
10-30 32
声明冲突：同一个样式，多次应用到同一个元素层叠：解决声明冲突的过程，浏览器自动处理（权重计算）
Web前端基础——层叠样式表（CSS）
weixin_40013461的博客
09-05 1110
本文介绍了CSS层叠样式表的简单调用方法，可通过style在标签/文档中调用，做一简单了解即可。
web前端开发css
10-20
Web前端开发CSS是指使用CSS（层叠样式表）来设计和开发网站的外观和样式。CSS可以控制网站的布局、颜色、字体、背景等方面，使网站更加美观、易于阅读和导航。在Web前端开发中，CSS通常与HTML和JavaScript一起使用，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值