前端-css讲解

最新推荐文章于 2024-09-30 09:31:23 发布
最新推荐文章于 2024-09-30 09:31:23 发布
阅读量323 收藏
点赞数
分类专栏： WEB 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiandanyou/article/details/112799220
版权

CSS

一、CSS是Cascading Style Sheet的简称，称为“层叠样式表”或者“级联样式表”，是一组格式设置规则，用于控制网页内容的外观，可将页面内容与表现形式分离。

二、1985年5月12日，W3C组织推出了CSS2,使得这项技术在世界范围内得到广泛的应用。

三、CSS3提供了非常多新途径去改善你的设计工作，且做了不少重要的变化。

优点

1、样式复用，有效的避免代码臃肿
2、方便网站的后期维护
3、对页面进行精准控制，实现精美、复杂的页面

基本语法

修改的样式：值；

根据书写位置分为

外部样式（也叫外联式）：将网页链接到外部样式表。
内部样式（也叫嵌入式）：在网页上创建嵌入的样式表。
行内样式（也叫内联式）：应用内嵌样式到各个网页元素。

行内样式

在指定标签中书写样式，仅在当前标签生效

<div style="border: solid; border-color: green;">
        <!-- 行内样式:书写在单个标签内并且只对当前标签产生作用的样式 -->
        <p>这是初始样例</p>
        <p style="background-color: pink;">这是样例</p>
        <p style="background-color: #ff00ff;font-size: 10px;">这是样例</p>
        <p style="font-size: 30px;border:double ; border-color: red;">这是样例</p>
</div>

内部样式

书写在当前页面内，对选择器选择的标签进行样式书写

<style>
/* 由选择器与样式组成 选择器{样式;样式;}*/
/* 可以使用这种方式为页面指定标签批量设置样式 */
p{
    color:red;
    background-color: black;
    /* 如果标签没有设置这个样式 那么都会自动设置 */
}
</style>

<!-- 使用<style>标签嵌入在HTML文档中，通常写在<head>与</head>之间这种方式方便在同页面中修改样式-->
    <div >
        <p>这是初始样例</p>
        <p>这是样例</p>
        <p>这是样例</p>
        <p>这是样例</p>
    </div>

外部样式

将样式内容书写纸以.css结尾的样式表文件中，在指定页面引入对指定选择的标签进行样式书写

外部样式书写与内部样式类似，只不过将书写在内部样式中的层叠样式书写在样式文件中，在指定页面进行引入

p{
    font-size: 30px;
    font-family: 隶书;
}

    <link rel="stylesheet" type="text/css" href="../css/p.css">

一般情况下进行样式书写使用外部样式（针对于前端开发人员），我们一般书写内部样式进行再已有样式的基础上进行修改。

当多个样式对同一标签相同属性进行设置是行内样式>内部样式>外部样式

选择器

css的选择器通常与样式表一起使用，由选择器动态选择需要进行指定样式添加的标签

https://www.w3school.com.cn/cssref/css_selectors.asp

选择器例子例子描述CSS
.class.intro选择 class=“intro” 的所有元素。1
#id#firstname选择 id=“firstname” 的所有元素。1
**选择所有元素。2
elementp选择所有

元素。

1
element,elementdiv,p选择所有
元素和所有

元素。

1
element elementdiv p选择
元素内部的所有

元素。

1
element>elementdiv>p选择父元素为
元素的所有

元素。

2
element+elementdiv+p选择紧接在
元素之后的所有

元素。

2
[attribute][target]选择带有 target 属性所有元素。2
[attribute=value][target=_blank]选择 target="_blank" 的所有元素。2
[attribute~=value][title~=flower]选择 title 属性包含单词 “flower” 的所有元素。2
[attribute|=value][lang|=en]选择 lang 属性值以 “en” 开头的所有元素。2
:linka:link选择所有未被访问的链接。1
:visiteda:visited选择所有已被访问的链接。1
:activea:active选择活动链接。1
:hovera:hover选择鼠标指针位于其上的链接。1
:focusinput:focus选择获得焦点的 input 元素。2
:first-letterp:first-letter选择每个

元素的首字母。

1
:first-linep:first-line选择每个

元素的首行。

1
:first-childp:first-child选择属于父元素的第一个子元素的每个

元素。

2
:beforep:before在每个

元素的内容之前插入内容。

2
:afterp:after在每个

元素的内容之后插入内容。

2
:lang(language)p:lang(it)选择带有以 “it” 开头的 lang 属性值的每个

元素。

2
element1~element2p~ul选择前面有

元素的每个

  • 元素。

3
[attribute^=value]a[src^=“https”]选择其 src 属性值以 “https” 开头的每个 元素。3
[attribute$=value]a[src$=".pdf"]选择其 src 属性以 “.pdf” 结尾的所有 元素。3
[attribute*=value]a[src*=“abc”]选择其 src 属性中包含 “abc” 子串的每个 元素。3
:first-of-typep:first-of-type选择属于其父元素的首个

元素的每个

元素。

3
:last-of-typep:last-of-type选择属于其父元素的最后

元素的每个

元素。

3
:only-of-typep:only-of-type选择属于其父元素唯一的

元素的每个

元素。

3
:only-childp:only-child选择属于其父元素的唯一子元素的每个

元素。

3
:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个

元素。

3
:nth-last-child(n)p:nth-last-child(2)同上，从最后一个子元素开始计数。3
:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个

元素的每个

元素。

3
:nth-last-of-type(n)p:nth-last-of-type(2)同上，但是从最后一个子元素开始计数。3
:last-childp:last-child选择属于其父元素最后一个子元素每个

元素。

3
:root:root选择文档的根元素。3
:emptyp:empty选择没有子元素的每个

元素（包括文本节点）。

3
:target#news:target选择当前活动的 #news 元素。3
:enabledinput:enabled选择每个启用的 元素。3
:disabledinput:disabled选择每个禁用的 元素3
:checkedinput:checked选择每个被选中的 元素。3
:not(selector):not§选择非

元素的每个元素。

3
::selection::selection选择被用户选取的元素部分。3

.class选择器

用于选择多个拥有相同class值的指定标签（多个标签可以不同）

#id选择器

用于选择拥有指定id值的标签（id在当前页面通常只有一个）

*通用选择器

选择页面中所有标签

标签选择器

直接以标签进行选择，当前页面指定标签设置指定样式

子类选择器

选择指定标签指定子标签进行样式设定

属性选择器

通过指定属性或属性的值进行标签的选择

盒子模型

在浏览器这个框框中，用多个框框进行分割，以这种风格进行页面的布局排版使用的就是盒子模型

盒子属性

margin（外边距/边界）：控制多个盒子直接的距离

border（边框）：每个盒子的厚度

padding（内边距/填充 ）：盒子中存储元素距离盒子边框的距离

注意：由于使用了盒子模型。所以在页面中的元素实际的距离应为当前盒子内边距+当前盒子边框+当前盒子外边距+指定盒子外边距+指定盒子边框+指定盒子内边距

border边框

border-style:solid; （dotted,dashed,double)
border-width:1px;
border-color:#f00;
border:1px solid #0f0; （顺序：宽、样式、颜色
border-bottom-style:dotted; (top、right、left)
border-bottom-width:5px;
border-bottom-color:#F93;
border-bottom:3px double #90C

注意：在进行边框设置时一般 样式宽度颜色一同设置（因为宽度默认3 颜色默认透明样式默认隐藏）

 <style type="text/css">
    div{
        height: 300px;
        width: 300px;
        background-color: cornflowerblue;
    }
    .d1{
        /* border-style: solid;
        border-width: 20px; 
        border-color: crimson; */
        /* 简化写法 */
        border:10px solid greenyellow;
    }
    .d2{
        /* border-left-style: solid;
        border-left-width: 20px;
        border-left-color:red ; */
        border-left: 20px solid red;
        /* border-right-style: solid;
        border-right-width: 20px;
        border-right-color:green ; */
        border-right: 20px solid green;
        /* border-bottom-style: solid;
        border-bottom-width: 20px;
        border-bottom-color:black ; */
        border-bottom: 20px solid black;
        /* border-top-style: dotted;
        border-top-width: 20px;
        border-top-color:black ; */
        border-top: 20px dotted black;
    }
    </style>
</head>
<body>
    <div class="d1">

    </div>

    <div class="d2">

    </div>

</body>

background背景

background-color:#f00;
background-image:url(…/images/bg.jpg);
background-repeat:no-repeat; (repeat-x,repeat-y, repeat)
background-position:1px 3px ;
对应水平位置、垂直位置
数值单位：px 或%
也可以是关键字,水平：left,center,right,垂直：top,center,bottom
background-attachment:fixed;
background: #ff0 url(…/images/bg.jpg) no-repeat fixed 10px 50%;

        .d3 {
            height: 600px;
            /* background-image: url("../img/sdwlb.gif");
            background-repeat: no-repeat;
            background-position: center;
            background-attachment:fixed; */
            background: #ff0 url(../img/sdwlb.gif)  no-repeat  fixed center;
        }

padding内边距

div的宽高如果没有指定 高度由内容与内边距决定，宽度默认一行

 div{
          
            background-color: turquoise;
            /* padding-left: 50%; 
            padding:10px;//设置四周边距
            padding:2px 5px; //设置上下  左右边距
            padding:2px 3px 4px;//设置 上 左右  下边距
            padding:1px 2px 3px 4px;//设置上  右 下 左 边距
            padding:10px;
        }

margin外边距

当前盒子距离父盒子边框的距离

margin-top:10px; (right,bottom,left)
margin:10px;
margin:2px 5px;
margin:2px 3px 4px;
margin:1px 2px 3px 4px;
margin:0 auto;

<style type="text/css">
        div {
            height: 500px;
            width: 500px;
            background-color: tomato;
        }
        .d1 {
            width: 100px;
            height: 100px;
            background-color: turquoise;
            margin:  0 auto;
        }

        body {
            margin: 0px;
        }
    </style>
</head>

<body>
    <div>
        <div class="d1">这是div中的内容</div>
    </div>
</body>

display显示隐藏

用于块级元素的显示与隐藏（不是仅仅只有这种方式）

  <style type="text/css">
        div {
            height: 200px;
            width: 200px;
        }
        .d1 {
            background-color: tomato;
              display: none;  
            /* 整个块都消失  在页面找不到相应存在 原位置会空出来 */
            /* display: block; */
            /* 原本的块级样式 前后自带换行符 */
             /* display: inline; */
            /* 整个块都消失  在页面可以找到存在 只不过0x0大小 */
            /* display: inline-block; */
        }

        .d2 {
            background-color: thistle;
        }
    </style>
</head>

<body>
    <div class="d1"></div>
    <div class="d2"></div>

</body>

颜色

在css中颜色的书写分为3中方式

颜色的英文标识

以三原色进行书写rgb(255,255,255)

以16进制进行书写#FF FF FF（如果存在连续的两个可以省略，仅当单个颜色重复时使用）

简单哟
关注
专栏目录
【前端之CSS的基本介绍】
qq_44735180的博客
05-04 4468
本章主要介绍了CSS的基本介绍：CSS定义、CSS特点、CSS语言基础、CSS参考教程链接、CSS3的升级。
前端 CSS 规范整理
jokeHello的专栏
04-16 1261
一、文件规范 1、文件均归档至约定的目录中（具体要求以豆瓣的CSS规范为例进行讲解）： 所有的CSS分为两大类：通用类和业务类。通用的CSS文件，放在如下目录中： 基本样式库 /css/core通用UI元素样式库 /css/libJS组件相关样式库 /css/ui 业务类的CSS是指和具体产品相关的文件，放在如下目录中： 读书 /css/book/电影 /css/
CSS从入门到精通
最新发布
YABO0812的博客
09-30 912
从下图可以看出，随着行高的变化，文字的位置也在不断变化，当行高和矩形的高度一样的时候，文字在矩形中上下居中。段落中默认是有行高的，但是这个默认的行高未必能满足我们的需求，因此我们就需要改变行高来实现我们需要的效果；div标签写出来的时候是没有高度的，但是有宽度，宽度默认和父标签的宽度是一样的。这里的百分号是相对于父元素的，也就是说，子元素的宽度是父元素的百分之60。子元素的高度是父元素的百分之20，所以首先要确定父元素的尺寸是存在的。英文的字间距是每个字母之间的距离，单词和单词之间的距离不属于字间距。
cuicuiv学HTML+CSS基础
Lcuicui的博客
09-15 191
学习笔记 HTML（5） HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。 CSS 层叠样式表(英文全称：Cascading Style Sh
前端CSS
weixin_30267697的博客
09-11 191
目录 1.CSS介绍 2.CSS的引入方式 2.1行内样式 2.2内接样式 2.3外接样式-链接式 2.4外接样式-导入式 3.css选择器 3.1基本选择器： 3.2标签选择器(标签名) ...
前端css
weixin_58276266的博客
06-07 658
css 在html的基础上美化页面 ; css没有标签 但是有css的语法; 在使用html的标签中添加属性语法 属性名
前端入门教程-奥力给(HTML-CSS-JS)
07-01
这个教程很可能包含了这三个主题的详细讲解，从基本语法到实践案例，帮助初学者逐步建立前端开发的知识体系。文档"前端入门教程-奥力给(HTML-CSS-JS)-2020122622392258.docx"可能是课程的主要讲义，可能包含了理论...
第34章 项目1-博客前端：封装库--CSS[下]1
08-03
在本节课程“第34章 项目1-博客前端：封装库--CSS[下]1”中，我们将深入学习如何封装CSS操作，主要聚焦在添加和移除类（class）以及设置和移除CSS规则。课程由主讲教师李炎恢讲解，他同时也是北风网（ibeifeng.com）...
第34章 项目1-博客前端：封装库--CSS选择器[上]1
08-03
在本章节“第34章 项目...本章节的讲解为后续的前端项目开发奠定了基础，通过封装CSS选择器，开发者可以更高效地操控页面元素，提高代码的可读性和维护性。继续关注后续章节，深入学习这一封装库的其他功能和应用场景。
html-css-book-SebastianRJames：GitHub课堂创建的html-css-book-SebastianRJames
03-03
总的来说，《HTML-CSS-JS 书》是一个全面的学习资源，涵盖了前端开发的三大核心技术。无论你是对网页开发感兴趣的新手，还是想要深化现有技能的专业人士，都可以从这个项目中受益。通过深入学习并实践其中的内容，你...
egghead-ionic-css:egghead.io课程的源代码-css source code
03-25
Egghead.IO作为知名的在线编程教育平台，提供了一系列关于Ionic的课程，其中包括了专门讲解 Ionic 应用程序中的CSS源码。本篇文章将深入剖析“egghead-ionic-css: egghead.io课程的源代码”，旨在帮助开发者更好地...
前端——CSS
wzzhahaha的博客
11-26 275
1、样式——内嵌式 （一般用在网站的首页，这样加载的快） &lt;style type="text/css"&gt;         div{             color: red;             font-size: 20px;             font-family: 'Microsoft Yahei';             line-height: 40px;...
前端之CSS
weixin_41285659的博客
01-09 260
一、导入方式 行内样式 <h1 style="color:red">我是标题</h1> 内部样式 <style> h1{ color:green; } </style> 外部样式 h1{ color:green; } <link rel="stylesheet" href="css/style.css"> 优先级符合就近原则。 二、选择器 1.基本选择器 标签选择器 ​ 会选择页面上
前端基础css
weixin_57780589的博客
08-31 757
CSS 表现类似外观装饰 设置文本内容（字体、大小、对齐方式）、图片外形（宽高、边框样式、边距）、版面布局和外观显示样式 语法规范 由选择器及一条或多条声明构成 属性与属性值之间用英文：分开 多个键值对之间用英文1；区分 代码风格 展开式、小写、属性值前冒号后面保留一个空格、选择器和大括号中间保留空格更直观 选择器作用 根据不同需求把不同标签选出来 基础选择器： 标签选择器：按标签名称分类，同一类型可设置，不能差异化设置 类选择器：单独选择一个或某几个标签 口诀：样式点定义 结构类（class)
前端 - CSS基础
旧时言的博客
04-28 1628
目标 掌握 CSS 基本语法规范和代码书写风格 掌握 CSS 选择器的各种用法 熟练使用 CSS 中的常用属性. CSS 是什么 层叠样式表 (Cascading Style Sheets). CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结 构分离. CSS 就是 “东方四大邪术” 之化妆术. 基本语法规范 选择器 + {一条/N条声明} 选择器决定针对谁修改 (找谁) 声明决定修改啥. (干啥) 声明的属性是键值对. 使用 ; 区分键值对,
前端-CSS
只是个人笔记，请见谅
03-03 352
CSS的作用 1.在没有CSS之前，我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式威性，费心费力。所以CSS就出现了。 2使用CSS将HTML页面的内容与样式分离提高web开发的工作效率 3.CSS可以让 html元素(内容)＋样式(CSS)分离，更好的控制页面 CSS基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&gt
Web前端之CSS
ling的博客
12-24 4165
前面说了HTML，现在再来数一说CSS，所谓CSS是指层叠样式表 (Cascading Style Sheets)，通过引入样式表，从而极大的提高了工作效率。 CSS 基础语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 selector {declaration1; declaration2; … declarationN } 选择器通常是你需要改变样式的 ...
前端基础之CSS
时光的博客
07-12 343
参考学习：https://www.cnblogs.com/liwenzhou/p/7999532.htmlCSS的介绍CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，简单地说就是对HTML元素加以装饰。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。CSS语法CSS实例每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性...
前端学习之CSS
weixin_53105591的博客
07-13 665
前端学习笔记们之css
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

简单哟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值