Web前端——CSS基础样式

已于 2022-02-12 15:10:50 修改
阅读量2.2k 收藏 11
点赞数 2
分类专栏： Web前端 文章标签： css
于 2020-10-05 10:03:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44853882/article/details/108920148
版权

文章目录

一. 样式的继承

1. 定义

  • 样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上

2. 范围

  • 继承是发生在祖先元素和后代元素之间

3. 优点

  • 继承的设计是为了方便开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有元素都具有该样式

4. 注意

并不是所有的样式都会被继承

比如：背景相关的，布局相关的这些样式都不会被继承

5. 例子

注：span的背景颜色并不是被继承的，只是span的背景默认是透明的，所以p标签的背景颜色透了过去

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式的继承</title>
    <style>

        body{
            font-size: 30px;
        }

        p{
            color: red;
            background-color: orange;
        }

        div{
            color: yellowgreen;
        }

    </style>
</head>
<body>
    
    <p>
        我是一个p元素<br>
        <span>我是p元素中的span</span>
    </p>

    <span>我是p元素外的span</span>

    <div>
        我是div
        <span>
            我是div中的span
            <em>我span中的em</em>
        </span>
    </div>
</body>
</html>

在这里插入图片描述

二. 选择器的权重

1. 样式的冲突

(1). 定义

当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式冲突

2. 选择器的权重

(1). 定义

发生样式冲突的时候，应用哪个样式由选择器的权重（优先级）决定

(2). 优先级

第一：内联样式

第二：id选择器

第三：类和伪类选择器

第四：元素选择器

第五：通配选择器

第六：继承的样式没有优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器的权重</title>
    <style>

        #box1{
            background-color: orange;
        }

        div{
            background-color: yellow;
        }

        .red{
            background-color: red;
        }
    </style>
</head>
<body>
    
     <div id="box1" class="red" style="background-color: skyblue;">我是一个div</div>

</body>
</html>

在这里插入图片描述
注意：
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示

分组选择器是单独计算的

选择器的累加不会超过其最大的数量级

例如：类选择器再高也不会超过id选择器

如果优先级计算后相同，此时优先使用靠下的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器的权重</title>
    <style>

        /* #box1{
            background-color: orange;
        }

        div#box1{
            background-color: yellow;
        } */

        .red{
            background-color: red;
        }

        .d1{
            background-color: purple;
        }

        div,p,span{
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    
     <div id="box1" class="red d1 d2">我是一个div</div>

</body>
</html>

在这里插入图片描述
注通配选择器的优先级高于继承优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器的权重</title>
    <style>

        *{
            font-size: 50px;
        }

        div{
            font-size: 20px;
        }

    </style>
</head>
<body>
    
     <div id="box1" class="red d1 d2">我是一个div <span>我是div中的span</span></div>

</body>
</html>

在这里插入图片描述
注：可以在某一个样式的后面添加 !important 则此时该样式会获得到最高的优先级，甚至超过内联样式

在开发中这个玩意一定要慎用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器的权重</title>
    <style>

        
        .d1{
            background-color: purple !important;
        }

        .red{
            background-color: red;
        }
        
    </style>
</head>
<body>
    
     <div id="box1" class="red d1 d2" style="background-color: chocolate;">我是一个div</div>

</body>
</html>

在这里插入图片描述

三. 单位

1. 长度单位定义

像素：
屏幕（显示器）实际上由一个一个小点点构成
不同屏幕的像素大小是不同的，像素越小的屏幕显示效果越清晰
所以同样的200px在不同设备下显示的效果不同

百分比：
也可以将属性值设置为相对于其父元素属性的百分比
好处：可以使子元素跟随父元素的改变而改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单位</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: chocolate;
        }

        .box2{
            width: 50%;
            height: 50%;
            background-color: aqua;
        }

    </style>
</head>
<body>
    
    <div class="box1">
        <div class="box2"></div>
    </div>

</body>
</html>

在这里插入图片描述

2. em

em是相对于元素的字体大小来计算的

1em = 1font-size(一般浏览器默认1font-size为16px)
em会根据字体大小的改变而改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单位</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: chocolate;
        }

        .box2{
            width: 50%;
            height: 50%;
            background-color: aqua;
        }

        .box3{
            font-size: 20px;
            width: 10em;
            height: 10em;
            background-color: greenyellow;
        }

    </style>
</head>
<body>
    
    <div class="box1">
        <div class="box2"></div>
    </div>

    <div class="box3"></div>

</body>
</html>

在这里插入图片描述

3. rem

rem是相对于根元素（html）的字体大小来计算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单位</title>
    <style>
        html{
            font-size: 30px;
        }
        
        .box1{
            width: 200px;
            height: 200px;
            background-color: chocolate;
        }

        .box2{
            width: 50%;
            height: 50%;
            background-color: aqua;
        }

        .box3{
            font-size: 20px;
            width: 10rem;
            height: 10rem;
            background-color: greenyellow;
        }

    </style>
</head>
<body>
    
    <div class="box1">
        <div class="box2"></div>
    </div>

    <div class="box3"></div>

</body>
</html>

在这里插入图片描述

4. 颜色

color：red;

颜色单位：

在CSS中可以直接使用颜色名来设置各种元素

例如：red、orange、yellow、blue

但是在CSS中直接使用颜色名是非常不方便的

(1). RGB值：

RGB是通过三种不同颜色的不同浓度来调配出不同的颜色

R：red
G：green
B：blue
每一种颜色的范围在0—255之间（0%—100%之间）

语法：RGB（红色，绿色，蓝色）

(2). RGBA值：

就是在RGB的基础上增加了一个a表示不透明度
需要四个值，前三个和RGB值一样，第四个表示不透明度
1表示完全不透明，0表示完全透明

例 .5表示半透明

(3). 十六进制的RGB值

语法：#红色绿色蓝色
颜色浓度通过00-FF

如果颜色两位两位重复可以进行简写

例：#aabbcc——>#abc
	#aabbcd就不可以简写了

(4). HSL值和HSLA值

H 色相（范围0—360）
S 饱和度：颜色的浓度（0%—100%）
L 亮度：颜色的亮度（0%—100%）

(5). 例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>颜色</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            background-color: rgb(255, 0, 0);
            background-color: rgb(0, 255, 0);
            background-color: rgb(0, 0, 255);
            background-color: rgb(0, 0, 0);
            background-color: rgb(255, 255, 255);
            background-color: rgba(106, 153, 85, .5);
            background-color: #ff0000;
            background-color: #f00;
            background-color: #bfa;
            background-color: hsl(60, 100%, 50%);
            background-color: hsla(70, 100%, 50%, 0.5);

        }
    </style>
</head>
<body>
    
    <div class="box1"></div>

</body>
</html>

在这里插入图片描述

四. CSS常用属性

1. 文本属性

  • 文本居中： text-align: center;
  • 超连接去下划线 text-decoration: none;

在这里插入图片描述

2. 字体属性

  • color：#FF0000；字体颜色红色
  • font-size：20px; 字体大小

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

3. 背景属性

  • background-color:#0F2D4C
    在这里插入图片描述

4. 列表属性

  • 列表去除修饰

    ul { 
	list-style: none; 
}

5. 表格属性

  • 红色 1 像素实线边框 border：1px solid red;

  • 表格细线

    table { 
	border: 1px solid black; /*设置边框*/ 
	border-collapse: collapse; /*将	边框合并*/ 
}
td,th {
	border: 1px solid black; /*设置边框*/ 
}

6. 宽高属性

宽度：

  • width:19px;
  • 宽度可以写像素值：19px；
  • 也可以写百分比值：20%；

高度

  • height:20px;
  • 高度可以写像素值：19px；
  • 也可以写百分比值：20%；

DIV 居中

  • margin-left: auto;
  • margin-right: auto;

五. CSS的特性

1. 层叠性

在这里插入图片描述

2. 继承性

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

3. 优先级

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

巧克力code
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一些开源的，好看的前端组件/样式库
weixin_43680337的博客
03-01 3178
开源免费又好看的组件库样式库，快来看看吧
前端页面样式（一）
陈小白的博客
02-17 5429
作者：陈小白 撰写时间：2019年02月01日   关于页面样式的一点点笔记……  1：html中的标签是成对出现的     html要与其他文件绑定才可以使用其他文件 2：id 和 class(类）其实是&lt;div&gt;&lt;/div&gt; 中的属性 &lt;li&gt;&lt;/li&gt;:中间可牵插文字 &lt;a&gt;&lt;/a&gt;:a标签 有一个不可少的...
2024年前端最全常见样式设计及DOM操作整理(1)，2024年最新快手Web前端面试
最新发布
2401_84617772的博客
05-13 373
一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等由于文章篇幅有限，仅展示部分内容$(‘img’).on(‘error’, function () {$(this).prop(‘src’, ‘img/bro
个人总结 - 前端开发常用css样式
老鹰的博客
09-03 1184
边框相关属性 width 宽 height 高 border-width 边框宽度 border-style 边框样式 border-color 边框颜色 以上三条可简写为一条border：宽度 样式 颜色如：border:2px solid red; border-bot...
前端必备精美CSS样式，不来瞅瞅吗？
m0_70571756的博客
06-02 6384
我特别喜欢收集前端好看的特效代码，前端好用的网站。今天给大家分享出来，如果觉得有帮助可以点赞收藏支持一下，如果能关注一下就再好不过了ヾ(≧▽≦*)o，之后还会分享许多干货，话不多说，上动图（网站在文章末尾）：目录🍓按钮系列🍇多选框系列🍈开关系列🍅卡片系列HTML: CSS: 更多按钮（文章最后有链接地址)：HTML: CSS: 🍈开关系列 HTML: CSS: HTML: CSS: 以上精美样式来自：零代码 - 精美CSS样式库 (lingdaima.
前端常用的一些插件、UI框架、js库，样式库以及官方文档。【持续更新】
是秃子总会发光
06-07 3922
前端常用的一些库：组件库、js库、工具库、样式库。
web前端基础——CSS入门
01-20
web前端基础——CSS入门 1.css的引入方式 内部样式： 直接在style里面写 内联样式： 外部样式表 2.css选择器 id选择器： #id名{} Hello World! #para1 { text-align:center; color:red; } ID属性不要以...
WEB前端面试——常见CSS知识点
06-30
WEB前端面试——常见CSS知识点 CSS是一种标记语言，用于描述网页的样式和布局。以下是常见的CSS知识点： 一、CSS盒子模型 CSS盒子模型分为标准盒模型（content-box）和怪异盒模型（border-box）。标准盒模型的...
头歌教学实践平台 Web前端开发基础 CSS-表格样式
01-20
"头歌教学实践平台"提供的"CSS——表格样式"课程，通过实际案例和练习，帮助学习者理解并运用上述知识点，提升Web前端开发技能。 总之，理解和掌握CSS在表格样式设计中的应用，对于构建美观且功能齐全的网页至关...
HTML5+CSS3 Web前端设计基础教程-PPT.rar
06-22
这篇教程——"HTML5+CSS3 Web前端设计基础教程-PPT"，显然是一个旨在帮助初学者和进阶者理解这两种语言基本概念和实践应用的资源。 HTML5（超文本标记语言第五版）是网页内容的结构化标准，它增强了对多媒体的支持...
Web编程基础——CSS、JavaScript、jQuery【高清版】
09-19
《Web编程基础——CSS、JavaScript、jQuery》是一本旨在教授Web前端开发基础知识的教程，涵盖了网页样式设计、动态脚本语言以及广泛使用的JavaScript库。在Web开发领域，这三者是构建交互式和响应式网站不可或缺的...
10套样式库
09-23
10套bootstrap前端样式库；
后台前端样式DEMO
04-24
后台前端样式DEMO
6种Web前端多彩的按钮（一）
08-20
6种Web前端多彩的按钮（一）
web前端开发css样式
04-17
常用的 CSS 代码缩写
自学web前端之CSS样式书写
01-08
前言 回顾之前写的内容； 1.认识编译软件和html 2.html中的标签和特殊字符 3.html中的头部标签和常用标签 4.超链接、锚链接和功能性链接 之前介绍过修饰网页需要用到css样式，但是在哪里写css样式呢？这篇帖子就介绍如何书写。 本篇帖子的目录 1.内部CSS样式代码书写 2.外部CSS样式代码书写 css样式书写 用html写出的网页内容，简单而有单一，不是很好看，如果要对网页布局进行修饰，就用到了css样式进行修饰,可以给特定的区域设置颜色、背景、字体、位置等等。那么怎么写css样式代码呢？一般我们进行布局修饰的时候会用到盒子容器（如 ），将所要修饰 的内容放到盒子中再用cl
你不知道的前端框架和UI组件库 - 大合集【收藏必备】
热门推荐
Qianmoer的博客
07-13 1万+
Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。 不兼容IE8，最低只能支持到 IE9 官网：https://cn.vuejs.org/ ReactJS 的确是一个伟大的东西，就其核心而言，就是一个可以和 html 混合编写的 jsx 格式，以及一个良好有序（加载时和更新时）、并和 html 渲染实时捆绑的状态机制。学习和使用 ReactJS，你并不需要对你现有的代码架构做太大的调整，只要引入 react.js 和 react-dom.js 两个文
常用CSS样式大全（超全面）
zy1992As的博客
02-28 1万+
14||字体||{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}5||垂直对齐||{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
前端样式库
楠倏的博客
09-06 3160
Bootstrap Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 —— 强调 响应式设计的概念。 通过响应式设计，你无需再为你的网站设计一个手机版的。它在任何尺寸的屏幕上看起来都会不错。 你仅需要通过添加下列代码到你的HTML开头来将Bootstrap添加到任意应用中： Font Awesome Font Awesome 是一个
web前端技术--css.pptx
01-11
Web前端技术--CSS.pptx文档深入讲解了Web前端开发中不可或缺的一部分——层叠样式表(Cascading Style Sheets, CSS)。CSS是用于描述HTML或XML（包括如SVG、MathML等）文档呈现的样式语言，它实现了内容与表现的分离，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值