CSS样式表

最新推荐文章于 2021-08-03 21:32:51 发布
最新推荐文章于 2021-08-03 21:32:51 发布
阅读量425 收藏 1
点赞数
分类专栏： 前端 文章标签： CSS样式表分类
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoxiaoyu85/article/details/51295691
版权

1. Css样式表分类（按照样式表书写位置）

(1)内部样式表

内部样式表是写在HTML的<head></head>里面的。内部样式表只对所在的网页有效。

 (2)外部样式表

首先要对整个外观定义一个CSS文件（扩展名为·css），然后通过链接来使用，一个外部的样式表可以通过HTML的LINK元素连接到HTML文档中

(3)行间样式表

行间样式表是指将CSS样式编码写在HTML标签中，格式如下
<h1 style="font-size:12px;color:#000FFF">
我的CSS样式。
</h1>
行间样式表由HTML元素的HTML元素的style支持，只需将CSS代码用分号隔开写在style=""之中。这是最基本的形式，但是它没有实现表现与内容分离且不能灵活的控制多个页面所以我们只是在调试CSS代码的时候使用。

 

2.Css样式表分类（按照样式表作用域）

(1) 标签选择器

以标签名开头，作用于本文件中的所有该标签，如:

p{
 color:#F3C
}

(2) class选择器

以    .类名   的形式命名，可以重复使用

(3) ID选择器

以 #id 形式命名，作用于所有的该ID的标签

#my{
 color:#C09
 

(4) 复合选择器

伪类选择器：      a:hover  等

群组选择器：     一次性选择一组内容，用逗号隔开   如 a,h3,p

标签指定选择器： 如p.a  选择类为a的P标签

包含选择器：       使用空格连接嵌套，含义是xxx里面的xxx

如： #top a{


} 表示id为top的标签里的a标签

兄弟相邻选择器 以+号隔开 如 h1+p

属性选择器 以中括号隔开如 p[src] 表示有src属性的p标签

通配符选择器 * 表示统统选中

 

 

 

 

 

96掌门师兄
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
行间样式表html,【css】内部样式、外部样式和行间样式
weixin_35466750的博客
06-03 201
首先我们先放置一个，标签没有任何实际语义，可以把它看作一个盒子、容器。一、内部样式添加方式：在里写一个，在中写入我们想要添加样式的标签名，并加上一个花括号，在花括号内设置各种属性。我们来为刚刚创建的设置一个宽度和高度为200px，颜色为橙色的内部样式。图1-1 设置内部样式图1-2 内部样式效果二、外部样式表添加方式：第一步：新建一个文件，格式为css，把内部样式写在中的内容写到新建的css文件中...
CSS优先级和层叠样式表作用域的理解
nailwl
06-30 5652
CSS 格式优先级 行内样式>ID样式>类别样式>标记样式。 同类样式的优先级，定义越晚，或者导入的样式越后，优先级越高。为了便于理解，可以通过改变下述代码中样式定义的顺序来分析。  程序代码   New Document             div{  border-style:dotted;   width:40%;   height:60%;  }    .div1{  bo
有作用域的css
DayDreamWMM的博客
09-17 3248
初接触Vue单文件，对style标签里的scoped属性难免有一点困惑，毕竟之前没有用到过，下面是关于scoped的一些讲解。 一个标准的.vue文件是这样的： // html内容区域 &lt;template&gt; &lt;div class="hello"&gt; &lt;h1&gt;{{ msg }}&lt;/h1&gt; &lt;/div&gt; &lt;/templ..
css 的分类
weixin_41854581的博客
08-25 1298
CSS ， 层叠样式表。层叠，指的是样式表的优先级。当发生冲突时，以优先级高的为标准。其作用是控制HTML的元素、标签的样式。由于CSS的放置位置的不同，将其分为了以下三类： 内部样式表 最好在&lt;head&gt;&lt;/head&gt;内放置 &lt;style type = "text/css"&gt;&lt;/style&gt;，如下： 注：type = “text/...
css作用域问题
qq_39831708的博客
06-29 1678
1．scoped作用域问题。 （1）组件内样式，默认始终加上scoped属性。如：<style scoped lang=”less”></style>； （2）需要影响到子组件内部样式，优先使用深度作用选择器/deep/。如： <style lang=”less” scoped> /deep/ .empty { background-color: blue; } </style>； （3）对于js生成的子组件元素，可以不添加scoped。但是最外层样式需要加上
CSS样式表与具体设备表示
09-25
当我们谈论“CSS样式表与具体设备表示”时，我们实际上是在讨论如何根据不同的输出设备来优化CSS的使用。这是一项关键的技术，因为它确保了网页在各种设备上的呈现效果都能达到最佳。 `<link>`标签是HTML中用来引入...
css样式表中文手册
10-17
CSS样式表手册是开发者学习和查阅CSS规则的重要参考资料，尤其对于中文用户，中文手册能更直观、准确地理解概念和技术。 **一、CSS基本概念** 1. **选择器（Selectors）**：选择器用于指定CSS样式要应用到哪些HTML...
网页添加CSS样式表的四种方法
09-25
网页添加CSS样式表有四种主要方法，每种方法都有其适用场景和特点。下面将详细介绍这四种方法： 1. 使用`STYLE`属性： 在HTML元素标签内部直接使用`STYLE`属性可以为单个元素设置样式。例如，你可以在`<TD>`标签中...
如何用JavaScript实现动态修改CSS样式表
10-22
如何用JavaScript实现动态修改CSS样式表？下面小编就为大家带来一篇JavaScript实现动态修改CSS样式表的方法。希望对大家有所帮助。一起跟随小编过来看看吧
Dreamweaver小技巧之应用CSS样式表
09-24
在本教程中，我们将探讨两个Dreamweaver中关于CSS样式的实用小技巧：去除超级链接的下划线以及创建可反复使用的外部CSS样式表。 首先，让我们看看如何去除超级链接的下划线并实现鼠标悬停时的变色效果。默认情况下...
css的样式局部作用,一、局部作用域
weixin_32226023的博客
08-03 1059
CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。产生局部作用域的唯一方法，就是使用一个独一无二的`class`的名字，不会与其他选择器重名。这就是 CSS Modules 的做法。下面是一个React组件[`App.js`](https://github.com/ruanyf/css-modules-demos/blob/master/demo01/components/App....
HTML5开发系列（4） 之 样式表的三种类型
z_x_Qiang的博客
09-04 3210
1.内部样式表 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;!--这种属于内部样式表： 在html5中 type="text/css" 是可以省略的--&
html样式表三种类型包括,css样式有哪几种类型
weixin_36081148的博客
06-05 7934
CSS样式有三种类型：1、行内样式(内嵌样式)，使用style属性直接把CSS代码添加到HTML的标记中；2、内部样式(内联样式)，把css样式写在style标签中；3、外部样式(外联样式)，将css样式写在一个单独的“.css”文件内。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。CSS样式主要包含以下三种类型：1、行内样式(内嵌样式)：结构...
样式表分类：（1）内部样式表（2）外部样式表 带例子讲解
zhangyulin54321的专栏
09-26 9056
四种样式：行内样式（style="")内嵌样式（)链接式（)和导入（@imorpt）。 我自己在ie和ff中测试了一下。感觉是以最后出现的优先级为最高，@imorpt特殊，在ie中它无论在什么位置都落后于标签中任何其他样式。但如果在标签前，则优先于,而在ff中就算位于后一样优先级在最后。   下面都以是 这个例子讲解： 将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14
css作用域的理解--从刷今日头条遇到的js题目说起
gengyunzhao的博客
05-29 869
思考下面几个题目的输出结果： 题目1： script> var a = 1; function fn1() { alert(a); var a = 2; } fn1(); alert(a); /script> 题目2： script> var a = 1; function fn1() { alert(a);
html中样式表的类型,CSS样式的分类介绍(基础知识)
weixin_31437175的博客
06-03 801
css样式的分类1.内部样式----内联样式使用的是style标签/* 样式 */多学一招：把页面的公共样式(不多的情况下)写在style标签中2.行内样式直接写在标签上的style属性中我是盒子多学一招：通常是后台程序员进行修改页面的时候使用3.外部样式新建一个css文件，然后和html页面关联起来a) 使用标签关联b) 使用指令关联/* 在style标签中 */@import url("css...
CSS样式表的分类及使用
He_May的博客
09-15 5109
第一次写博客，还请多多指教。  CSS(Cascading Style Sheets),层叠样式表。 一、样式的分类    1. 内联样式，又有人称行内样式、行间样式、内嵌样式。直接作为标签属性写在html文档中。    2. 内部样式，在html文档head中，以style标签包裹，直接写在html文档中。    3. 外部样式，独立于html文档，以.css为后缀名的文件。 二、调
html跳转
热门推荐
xiaoxiaoyu85的专栏
05-25 1万+
1.a标签跳转 _blank是新窗口 _self是自身 _parent是父窗口 _top是顶层窗口 当然也可以是自己定义的一个frame 的名字 比如 全部问题 或者使用js window.open("/static/html/api_help_chat.html");  2.跳转的时候带参数 3.跳转中有#
使用openssl实现 https (TLS 和OpenSSL关系) + 浏览器https校验
xiaoxiaoyu85的专栏
07-06 5614
openssl TLS的关系 TLS（Transport Layer Security，安全传输层)，TLS是建立在传输层TCP协议之上的协议，服务于应用层，它的前身是SSL（Secure Socket Layer，安全套接字层），它实现了将应用层的报文进行加密后再交由TCP进行传输的功能。 在SSL更新到3.0时，IETF对SSL3.0进行了标准化，并添加了少数机制(但是几乎和SSL3.0无...
tkinter+css样式表
最新发布
02-03
Tkinter是Python的一个标准GUI库，用于创建图形用户界面。它提供了一组丰富的控件和布局管理器，可以用于构建各种类型的应用程序。 CSS（层叠样式表）是一种用于描述网页样式的语言，它可以控制网页的布局、字体、颜色、背景等方面的样式。在Tkinter中，可以使用CSS样式表来美化应用程序的界面。 要在Tkinter中使用CSS样式表，需要借助第三方库tkinter-css，它提供了对CSS样式表的解析和应用功能。你可以通过pip安装该库： ``` pip install tkinter-css ``` 安装完成后，可以按照以下步骤来使用CSS样式表： 1. 创建一个Tkinter应用程序的主窗口对象。 2. 导入tkinter_css模块，并使用`set_style`函数加载CSS样式表文件。 3. 使用`get_style`函数获取指定控件的样式。 4. 使用`configure`方法将样式应用到控件上。 下面是一个简单的示例代码，演示了如何使用CSS样式表来设置按钮的样式： ```python import tkinter as tk import tkinter_css as tkcss root = tk.Tk() # 加载CSS样式表 tkcss.set_style("style.css") # 创建按钮 button = tk.Button(root, text="Click me") # 获取按钮的样式 style = tkcss.get_style(button) # 将样式应用到按钮上 button.configure(**style) button.pack() root.mainloop() ``` 在上面的示例中，我们创建了一个名为"style.css"的CSS样式表文件，其中定义了按钮的样式。然后通过`set_style`函数加载该样式表，并使用`get_style`函数获取按钮的样式，最后使用`configure`方法将样式应用到按钮上。 需要注意的是，tkinter-css库目前只支持部分CSS属性和选择器，具体可以参考它的文档。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值