01_CSS 层叠样式表

最新推荐文章于 2023-11-03 14:38:55 发布
最新推荐文章于 2023-11-03 14:38:55 发布
阅读量54 收藏
点赞数
分类专栏： 前端 文章标签： html css servlet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65601072/article/details/127317397
版权

Cascading style sheets

语法规则

CSS书写位置

<head>
    <title></title>

    <style>
        /* 这里写css */
    </style>
<head>

CSS 引入方式

引入方式

书写位置

作用范围

使用场景

内嵌式

style 标签

当前页面

小案例

外链式

link 标签引入单独 css 文件

多个页面

项目中

行内式

标签 style 属性中

当前标签

配合 js 使用

（1）内嵌式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        p {
            /* 文字颜色设置为红色 */
            color: red;
            /* 字体大小设置为30像素 */
            font-size: 30px;
            /* 背景颜色 */
            background-color: #bfa;
            /* 设置宽度和高度 */
            width: 600px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>

<body>
    <p>p段落里的文字</p>
</body>
</html>

（2）外链式

（3）行内式

<div style="color: green; background-color: #f1f1f1;">
  这是一段设置了css样式的文字
</div>

基础选择器

（1）标签选择器

标签名 {
    属性名：属性值;
}


<style>
    p {
        color: red;
    }
</style>

<p>你好，世界</p>

（2）类选择器

<style>
    .red {
        color: red;
    }

    .size {
        font-size: 60px;
    }
</style>

<div class="red">你好，世界</div>
<div class="red size">你好，世界</div>

（3）id 选择器

<style>
    #name {
        color: green;
    }
</style>

<div id="name">你好，世界</div>

（4）通配符选择器

/* 清除内外边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

lambo mercy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
倒计时秒杀js代码
11-20
小米商城倒计时秒杀js代码,时间换算,设置秒数自动开始倒数
For循环-九九乘法表/九九偶数乘法表/九九奇数乘法表
qq_45579661的博客
09-12 741
1.九九乘法表 2.九九偶数乘法表 3.九九奇数乘法表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca
css 圆形扩散特效 水波
笔记库
10-16 2032
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=...
JavaScript限时秒杀
m0_57202083的博客
08-23 2063
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="box"> <div id="d"></div> <!-- 剩余的天数 --> <div id="h"></div> .
请使用插槽vm.$slots实现一个导航栏结构
weixin_47518648的博客
10-25 2595
运行结果如下： 话不多说，直接开整： 样式如下： <style> #navga{ top:0; left:0; right: 0; display: flex; justify-content: space-between; align-items: center; padding:..
CSS层叠样式表
10-15
分享的是来自麦子学院网课，关于CSS层叠样式表的知识结构图，用的思维导图工具是xmind，一款免费的思维导图工具
css层叠样式表手册_css样式表_css层叠样式表_css样式表下载
03-18
css层叠样式表手册_css样式表_css层叠样式表_css样式表下载css层叠样式表手册_css样式表_css层叠样式表_css样式表下载css层叠样式表手册_css样式表_css层叠样式表_css样式表下载
5日精通CSS层叠样式表
07-22
资源名称：5日精通CSS层叠样式表内容简介：每天任务量详尽，按本教程，包你5天精通CSS5日精通CSS层叠样式表第1日·1.1 第1日 ·1.2 样式表能为我们做什么？·1.5 分类及其它技巧·1.6 串接·1.7 关于浏览器的坏消息 ...
CSS层叠样式表的层叠是什么意思(自我理解)
09-25
基本上层叠的意思就是“继承”、“权重”、“覆盖”，通过良好的层级命名更好的实现效果，更少的代码，更多的功能，下面为大家详细介绍下，感兴趣的朋友不要错过
CSS 层叠样式表命名参考表
09-25
CSS 层叠样式表命名参考，这样的命名更正规，搜索引擎与用户也习惯。
Vue 使用插槽vm.$slots实现一个导航栏结构
qq_47119426的博客
10-23 5719
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏</title> </head> <script src="./JS/vue.js"></script> <style> .Navbar{ display: flex; height: 44
使用JS,实现秒杀倒计时!
m0_74268056的博客
11-03 432
使用JS,实现秒杀倒计时!
CSS实现Tab布局
weixin_34289454的博客
04-05 361
一、布局方式 1、内容与tab分离 <div class="container"> <div class="tab-content"> <div id="item1" class="item">内容1</div> <div id="item2" class="...
秒杀倒计时JS代码
阿四的星期天
12-08 760
body { font-size:12px; font-family:"宋体"; color:red; }  #sheng1 span {  color:black; }  #time { color:blue; font-family:"微软雅黑"; } 现在时间是： function time()   {   var now,h,m,s;   now=
js秒杀倒计时方法
山海一哥的博客
01-02 673
<p id="demo"></p> // 设置我们准备倒计时的日期 const countDownDate = new Date("2028-01-05 15:37:25").getTime(); // 每秒更新一次 var x = setInterval(function() { // 获取当前时间 var now = new Date().getT...
js倒计时秒杀效果
datuzidppd5556的博客
08-15 181
js倒计时秒杀效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
纯CSS制作的TAB选项卡
weixin_33826609的博客
05-22 104
代码 这里主要使用表单的单选按钮来实现这个TAB显示和隐藏，首页tab里的内容默认隐藏，如果单选按钮为选中状态（checked）就显示内容。具体请看下面代码。 关于兼容性，因为是用CSS3来制作的，所以如果不支持CSS3的浏览将会出现不兼容的情况。 HTML代码 &lt;ul class="tabs"&gt; &lt;li&gt; &lt;input type="radio" name="tab...
js秒杀倒计时
.
10-11 3907
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body onload="miaosha();"&gt; &lt;p cl
纯Css制作tab选项卡
weixin_55753367的博客
03-04 2902
Css本身的功能就很强大的，尤其是Css3出来之后，大部分特效只用Css3就能完成了，无需再费心思去研究js、jQuery该怎么怎么去写，代码简洁方便。下面这个是用纯Css制作的tab选项卡效果： 用Css实现这个选项卡效果，需要用到label标签，label标签不会呈现任何效果，当点击label时，浏览器会自动将焦点转到和标签相关的的表单控件上。 这个用Css实现tab效果的主要思路是：使用表单的单选按钮来实现这个tab显示和隐藏，首先tab里的内容默认隐藏，如果单选按钮为选中状态（checked）就显
tkinter+css样式表
最新发布
02-03
CSS（层叠样式表）是一种用于描述网页样式的语言，它可以控制网页的布局、字体、颜色、背景等方面的样式。在Tkinter中，可以使用CSS样式表来美化应用程序的界面。 要在Tkinter中使用CSS样式表，需要借助第三方库...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值