CSS基础（一）

最新推荐文章于 2022-10-30 20:24:09 发布
最新推荐文章于 2022-10-30 20:24:09 发布
阅读量627 收藏 1
点赞数
分类专栏： Web前端 文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51330175/article/details/125749737
版权

目录

一、CSS介绍与基本使用

1、CSS样式

2、CSS作用

3、使用方法

1）行间样式

2）内部样式

3）外部样式

二、CSS选择器

1、选择器作用

2、选择器权重

3、选择器种类

1）标签选择器

2）id选择器

3）class选择器

4）群组选择器

5）全选择器

6）层次选择器

7）属性选择器

8）伪类选择器

三、CSS字体/文本

四、CSS背景

一、CSS介绍与基本使用

1、CSS样式

        层叠样式表（Cascading Style Sheets）是一种用来表现HTML或XML等文件样式的计算机语言，CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

2、CSS作用

        CSS就是网页的化妆师，可以让网页变得更加美观。

3、使用方法

1）行间样式

        行间样式是直接写在标签内的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
</head>
<body>
    <!--行间样式-->
	<p style="background:red">段落标签p</p>
</body>
</html>

2）内部样式

        内部样式是写在style标签内的样式，而style标签则写在head标签内。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>

	<!--    内部样式-->
    <style>
        /*内部样式表*/
        p{color:red;height:100px;width:100px}
    </style>
    
</head>
<body>
	<!-- 内部样式    style标签写在head标签内 -->
    <p>段落标签p</p>
</body>
</html>

3）外部样式

        外部样式是使用外部的CSS文件，并且进行引用，从而进行设置样式的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>

	<!--    自闭合标签，用来加载引用外部的CSS文件-->
    <link rel="stylesheet" href="./style.css">  <!--style.css与当前文件放在同级目录下-->
    
</head>
<body>
    <p>段落标签p</p>
</body>
</html>

        CSS样式文件：

/*外部样式表*/
p{color:orange;height:100px;width:100px}

二、CSS选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <!--    无法精准地为每个p标签设置各自的样式，此时需要用到CSS选择器-->
    <style>
        p{color: red}
        p{color: blue}
        p{color: orange}
    </style>
</head>
<body>
    <p>段落标签1，样式1</p>
    <p>段落标签2，样式2</p>
    <p>段落标签3，样式3</p>
</body>
</html>

运行结果：

         通过以上运行结果可以发现，各个段落标签都为相同颜色，无法实现精准地令每个标签具有各自的颜色样式，此时应使用CSS选择器。

1、选择器作用

        给指定的元素设置样式，能够更加精准。

2、选择器权重

        选择器也有权重差别，当出现冲突样式的时候，选择权重大的样式。

选择器权重
行间样式 > (内部样式 = 外部样式)【看标签的先后顺序】 > id选择器 > class选择器 > 标签选择器

3、选择器种类

1）标签选择器

        标签选择器：通过指定标签来设置每个标签的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    
    <style>
        p{color: red}
        p{color: blue}
        p{color: orange}
        span{color: pink}
    </style>
</head>
<body>
    <p>段落标签1，样式1</p>
    <p>段落标签2，样式2</p>
    <p>段落标签3，样式3</p>
    <span>文本标签span</span>
</body>
</html>

运行结果：p标签颜色均为“orange”，而span标签颜色为“pink”

2）id选择器

        id选择器：通过标签唯一的id，定位标签设置样式，在样式中用#id来标识。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>

    <style>
        #p1{color: red}
        #p2{color: blue}
        #p3{color: orange}
    </style>
</head>
<body>
	<!--    id必须唯一，且不重复-->
    <p id="p1">段落标签1，样式1</p>
    <p id="p2">段落标签2，样式2</p>
    <p id="p3">段落标签3，样式3</p>
</body>
</html>

运行结果：

3）class选择器

        class选择器：通过标签的class，对标签设置样式，其中class可以不唯一，也可以重复，在样式中用.class来标识。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>

    <style>
        p{color: red}
        #p2{color: blue}    /* #代表id */
        .p3{color: orange}  /* .代表类class */
        .p4{color: yellow}
    </style>
</head>
<body>
    <p>段落标签1，样式1</p>
    <p id="p2">段落标签2，样式2</p>    <!-- id必须唯一，且不重复-->
    <p class="p3">段落标签3，样式3</p>     <!-- class可以不唯一，可以重复-->
    <p class="p3">段落标签4，样式4</p>
    <p class="p3 p4">段落标签5，样式5</p>
</body>
</html>

运行结果：

4）群组选择器

        群组选择器：以逗号(,)间隔给多个标签添加相同样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>

    <style>
        p,#span0,div{color:red}   /* 群组选择器：以逗号间隔给多个标签添加相同样式 */
    </style>
</head>
<body>
    <p>段落标签</p>
    <span id="span0">文本标签</span>
    <div>块级标签div</div>
</body>
</html>

运行结果：

5）全选择器

        全选择器：用星号*（代表全部）给所有标签设置相同样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>

    <style>
        *{color:blue}
    </style>
</head>
<body>
    <p>段落标签</p>
    <span id="span0">文本标签</span>
    <div>块级标签div</div>
</body>
</html>

运行结果：

6）层次选择器

        层次选择器：分为子代、后代、相邻和兄弟等四种选择器。

        ① 后代选择器

        后代选择器之间的层次关系由空格来决定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>

    <style>
        /*后代选择器之间的层次关系由空格来决定*/
        div span{color:blue}
    </style>
</head>
<body>
    <!--后代选择器-->
    <div>
        <p>段落标签1</p>
        <p>段落标签2</p>
        <p>段落标签3
            <span>段落标签3下的文本标签
                <!-- b标签：加粗标签-->
                <b>我真的是一个b标签！</b>
            </span>
        </p>
    </div>
</body>
</html>

运行结果：

         ② 子代选择器

        子代选择器具有严格的层次关系，子代选择器之间的层次关系由>来决定。子代选择器须一层一层指定，而后代选择器可跨层指定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>

    <style>
        /*子代选择器之间的层次关系由>来决定*/
        div > span{color:blue}
    </style>
</head>
<body>
    <!--后代选择器-->
    <div>
        <p>段落标签1</p>
        <p>段落标签2</p>
        <p>段落标签3
            <span>段落标签3下的文本标签
                <!-- b标签：加粗标签-->
                <b>我真的是一个b标签！</b>
            </span>
        </p>

        <span>
            文本标签2
            <span>
                文本标签2下的文本标签3
            </span>
            <b>文本标签下的b标签2</b>
        </span>
    </div>
</body>
</html>

运行结果：

        ③ 兄弟选择器

        同一个父亲、同一层次之下都称之为兄弟。兄弟选择器的层次关系由~决定，~指定下的兄弟标签，除其本身外的下位标签都将设置样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>

    <style>
        .p2 ~ p{color:blue}     /* 除p2外的下位兄弟标签（同级标签）被设置样式，p3和p4有样式 */
    </style>
</head>
<body>
    <div>
        <p>段落标签1</p>
        <p class="p2">段落标签2</p>
        <p id="p3">段落标签3
            <span>段落标签3下的文本标签
                <b>b标签</b>
            </span>
        </p>
        <p id="p4">段落标签4</p>

        <span>
            <p>p标签5</p>
        </span>
    </div>
</body>
</html>

运行结果：

         ④ 相邻（兄弟）选择器

        同一个父亲、同一层次之下都称之为兄弟。相邻（兄弟）选择器的层次关系由+决定，除此之外，还要保证是相邻关系。+指定下的兄弟标签，除其本身外的相邻下位标签被设置样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>

    <style>
        .p2 + p{color:blue}     /* 除p2外的相邻下位兄弟标签（同级标签）被设置样式，p3具有样式 */
    </style>
</head>
<body>
    <div>
        <p>段落标签1</p>
        <p class="p2">段落标签2</p>
        <p id="p3">段落标签3
            <span>段落标签3下的文本标签
                <b>b标签</b>
            </span>
        </p>
        <p id="p4">段落标签4</p>

        <span>
            <p>p标签5</p>
        </span>
    </div>
</body>
</html>

运行结果：

7）属性选择器

        属性选择器：通过属性(如name)设置样式，通过[]决定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        /*通过属性添加样式，同时还可以指定属性值*/
        p[name]{color: wheat}
        span[name]{color: purple}
        p[id]{color: green}
        p[name="p2"]{color: yellow}
    </style>
</head>
<body>
    <div>
        <p name="p1">段落标签1</p>
        <p name="p2">段落标签2</p>
        <p id="p3">段落标签3</p>
        <span name="sp1">文本标签</span>
    </div>
</body>
</html>

运行结果：

8）伪类选择器

  • 伪类选择器常常用于a标签。

伪类选择器下的4个状态

（1）未访问    link

（2）鼠标悬停    hover

（3）鼠标点击，链接激活    active

（4）访问之后    visited

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        /*状态1：未访问【link】，字体颜色为黑色，且无下划线*/
        a:link{color: black;text-decoration: none}
        /*状态4：访问过后，链接变为灰色，下划线消失*/
        a:visited{color: gray;text-decoration: none}
        /*状态2：鼠标悬停【hover】，字体颜色为蓝色，且出现下划线*/
        a:hover{color:blue;text-decoration: underline}
        /*状态3：鼠标点击【active】，链接激活，点击时字体变为黄色*/
        a:active{color: yellow}

        div{height:100px;background: blue}
        div:hover{height: 200px;background: yellow}
    </style>
</head>
<body>
    <a href="https://www.baidu.com/">点击跳转百度</a>
    <div></div>
</body>
</html>

三、CSS字体/文本

字体：font-family

字体大小：font-size

字体样式：font-style

字体粗细：font-weight

大小写：font-variant

复合样式：font

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
    <style>
        #box{
            width:400px;
            height:200px;
            background: pink;
            /* 文字大小：浏览器的文字大小最小为12px，谷歌默认大小是16px */
            font-size: 20px;
            /* 字体：谷歌默认字体是微软雅黑，火狐默认字体是宋体 */
            font-family: 仿宋;
            /* 文字艳色 */
            color: blue;
            /* 行高  行间距=（行高-字体大小）/2   只有一段文字时，可实现上下居中的效果，将line-height设置等于height即可 */
            line-height: 200px;
            /* 文本对齐  center:居中对齐；left:左对齐；right:右对齐   */
            text-align: center;
            /* 首行缩进  em代表一个字符宽度 */
            text-indent: 2em;
            /* 文字着重    bold:加粗；normal:原粗细 */
            font-weight: bold;
            /* 文字倾斜    italic:倾斜；normal:原样式 */
            font-style: italic;
            /* 文字修饰    underline:下划线；overline:上边线；删除线(中间线):line-through；无装饰:none */
            text-decoration: underline;
            /* 字母间距：每个字符文字之间的距离 */
            letter-spacing: 10px;
            /* 单词间距：解析空格，转换为设置的长度 */
            word-spacing: 30px;
            /* 英文字母单词大小写 */
            font-variant: small-caps;   /* 大小写的转化 */
        }
    </style>
</head>
<body>
    <div id="box">块级标签 label</div>
</body>
</html>

运行结果：

四、CSS背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景样式</title>
    <style>
        #box{
            width: 400px;
            height: 400px;

            /* 背景颜色 */
            background-color: yellow;

            /* 背景图片 */
            background-image: url("pq.jpeg");  /* 准备一张图片，或者复制网页图片地址链接 */

            /* 背景大小、尺寸【宽高】  让图片全部显示 */
            /* 当只有一个参数时，它会按宽的比例去计算高度  */
            background-size: 200px;  /* 4张图片 */

            /* 背景平铺、重复   no-repeat:不重复  repeat-x:x轴重复  repeat-y:y轴重复    */
            background-repeat: no-repeat;

            /* 背景定位  x轴、y轴移动，也可以是负像素 */
            /* 当只有一个参数时，另一个未设置的参数默认居中 */
            /*background-position: 40px 40px;*/
            /* 上（top）下（bottom）左（left）右（right）居中（center） */
            background-position: center;
            /* background-position: 0 0 ;  0后可以不加px */
            /* 百分号实现居中 */
            /*background-position: 50% 50%;*/
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

  •  运行结果：

  • 复合样式

        将样式全部写在一起，从而起到简化的作用。复合样式的书写需要按照一定的规则，背景样式复合样式的填写顺序如下：颜色、图片、平铺、定位/大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景样式</title>
    <style>
        #box{
            width: 400px;
            height: 400px;
            background: yellow url("pq.jpeg") no-repeat 0 0/400px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

 运行结果：

编程使我头冷
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【前端】行间样式、内部样式和外链样式，选择器，伪类，样式，开发者工具，快捷键
yangdingyu的博客
01-25 1131
行间样式、内部样式和外链样式 写在style属性中的样式叫行间样式 写在style标记的样式叫内部样式 写在css文件里的样式叫外链样式，需要link链入html文件 内部样式和外链样式需要用选择器找到要设置样式的元素 选择器 通配符选择器：* 选中所有的元素 标记名选择器：div 选中所有标记名为div的元素 类名选择器：.d1 选中所有类名为d1的元素 id选择器：#a 选中id值为a的唯一元素 ...
前端css基础知识点之条件hack
Sun_Raiser的博客
07-13 145
前端css基础知识点之条件hack 条件hack 选择ie浏览器以及不同版本 是ie特有功能，ie10开始标准模式下 不再支持条件注释 <!--[if IE]> <p style="backgroud: red;"> 只能被ie识别 </p> <![endif]--> <!--[if IE 6]> <p style="backgroud: red;"> 只能被ie6识别
css设置行间距的三种方法
很酷的站长的博客
10-30 6345
本文教程操作环境：windows7系统、css3版，DELL G3电脑。line-height属性指定了一个百分比，它将相对于字体来计算行高。以上就是css设置行间距的三种方法，希望对大家有所帮助。
css 学习笔记
May_Chiong的博客
04-20 236
css 样式信息创建css行间样式、内联样式内部样式、页面级css外部样式表导入式样式表样式表优先级CSS语法选择器CSS权重CSS文字样式a链接盒子模型margin 的常见bugmargin塌陷：margin合并：边框样式定位 positionrelative 相对定位(新的图层)absolute 绝对定位（新的图层）fixed 固定定位元素在浏览器居中浮动float清除浮动伪元素背景图样...
【前端修炼之路】第一话 · 初识前端领域
kikokingの比特宇宙
06-16 2872
本文首先简要介绍前端开发工程师是干什么的，然后对HTML、CSS、JavaScript这三类进行初步介绍与对比，同时教会零基础读者使用这三种语言进行网页的设计与开发，并带有实例和讲解。
Css基础 （一）.doc
04-30
css知识点汇总，css语法、选择器的类型和种类，如何调用css，以及css中的一些属性设置，做了一个小的汇总，希望对学习css有所帮助
css基础教学1
08-03
第一步，安装工具 第二步，找到自己要改的地方 第三步，修改
前端CSS基础入门一个介绍
11-15
学习的一个记录！ 方便查看，如有违规联系删除！
CSS+DIV设计基础
05-03
DIV+CSS是WEB设计标准，它是一种网页的布局方法。...XHTML是一种在HTML（标准通用标记语言的子集）基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。
前端HTML5 css基础
03-09
前端HTML5 css基础
CSS基础标签.md
04-14
CSS中元素的两种居中方式....
html+css基础.md
02-25
HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体...此资源 原创HTML+CSS基础 实战51zxw.net 小清流吖羞羞萌芽之作。
CSS基础知识超全整理
07-04
整理好的一份关于css的知识大纲，希望能够帮助到大家，可以用来复习回顾
CSS布局基础BFC
01-21
于是迫不及待的google了一下，才发现原来它无时无刻不在我们的css当中，只不过它并不是一个属性，不需要我们平常使用手写罢了。但是它的重要性确是杠杠的，可以这么说，没有它就就没有什么css布局 BFC,全称 Block ...
css基础教程
06-16
CSS 概述 • CSS 指层叠样式表 (Cascading Style Sheets) • 样式定义如何显示 HTML ...• 样式通常存储在样式表中 ...• 外部样式表可以极大提高工作效率 • 外部样式表通常存储在 CSS 文件中 • 多个样式定义可层叠为一
CSS引入方式
weixin_45976564的博客
09-09 387
CSS引入方式 一.行内样式表（行内式） 行内样式表(内联样式表）是在元素标签内部的style属性中设定CSS样式，适用于修改简单样式 <div style="color:red; font-size:12px;">青春不常在，学习是正道</div> style其实就是标签的属性 在双引入中间，写法要符合CSS规范 可以控制当前的标签设置样式 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用。 使.
CSS简介、选择器及常用样式
赵大土的博客
07-25 278
北京尚学堂_JAVA零基础班_CSS听课笔记：为高效布局的CSS1.什么是CSS？2. CSS如何引入？2.1 内嵌引入法2.2 内部引入法2.3 外部引入法2.4 三种引入方式的优先级3. 如何写CSS？3.1 选择器3.1.1 什么是选择器3.1.2 选择器的种类3.1.2.1 基本选择器3.1.2.1.1 元素选择器3.1.2.1.2 ID选择器3.1.2.1.3 类选择器3.1.2.1.4...
CSS学习笔记：背景图片样式
weixin_42576837的博客
10-16 1424
CSS学习笔记
css的样式
starsbloom的博客
12-14 203
css的样式有三种： 1、行类样式：就是直接将样式写在标签上。 <p style="color:red;">我是江小白</p> 2、内联样式：写在当前的HTML的style标签中。 注意： 按照规范style标签写在head标签里 <style> p{ color: red; } div { color: yellow; } </style> <body> <div>即使敌众我寡，末将也能在万军丛中取敌将之首级，如从探囊取物</
HTML CSS基础
最新发布
07-27
根据本学期所学习的HTML及CSS网页制作基础知识，我们可以了解到HTML是一种标记语言，用于创建网页结构和内容，而CSS则是一种样式表语言，用于控制网页的外观和布局。在网页制作中，我们需要掌握HTML的基本标签，如标题、段落、链接、图片等，以及CSS的基本属性，如颜色、字体、边框、背景等。同时，我们还需要了解网页的盒模型、浮动、定位等概念，以及响应式设计和网页优化的相关技术。通过学习这些基础知识，我们可以制作出美观、实用、易用的网页，为用户提供更好的浏览体验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值