当前位置: 首页 > 编程日记 > 正文

css 层叠式样式表(2)

一,样式表分类

(1)内联样式。 --优先级最高,代码重复使用最差。

(当特殊的样式需要应用到单独某个元素时,可以使用。 直接在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。)

(2)内嵌样式表。 --优先级别第二,不常用,代码重用性一般。

(当单个文件需要特别样式时可以使用内嵌样式表。在 head 部分通过 <style> 标签定义内部样式表。)

(3)外部样式表。 --  优先级最低,最常用,代码重用性最高。

(当样式需要被应用到很多页面的时候,可以使用。使用外部样式表可以关联多个元素或者文件。)

1、先创建一个样式表

2、写入样式表内容,调整样式表位置

二。选择器

每一条css样式定义由两部分组成,形式如下:
选择器
{
属性
}
在{}之前的部分就是“选择器”。
“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。

选择器是选择器,外部样式表只是代码位置

(1)类别选择器( class选择器)

前面以"." 来标志,如:

.d1

{

color:red;

}

在HTML页中:

<div class="d1";>文字</div>    文字颜色为红色

<p class="d1";>文字</p>      文字颜色为红色

定义了一个class类,将样式应用到了元素中。

(2)id选择器  优先级最高

前面以"#"来标志,如:

#d2

{

color:blue;

}

在HTML页中:

<div class="d1" id="d2">文字</div>     文字颜色变为蓝色     id选择器优先级高于类别选择器

(3)标签选择器(根据标签名选择)如果同时出现类别选择器和id选择器,按照优先级来及执行。最不常用

前面以"标签名"来标志,如:

div

{

color:red;

}

在HTML页中:

<div>文字<div>      文字颜色变为红色

(4)复合选择器 。有id第一优先级/都是类别选择器第二优先级。最常用

[1]群组选择器

当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔。

.d1,#d2

{

color:red;

}

在HTML页中:

<div class="d1";>文字</div>    文字颜色为红色

<p id="d2";>文字</p>      文字颜色为红色

使用群组选择器,将会大大的简化CSS代码,将具有多个相同属性的元素,合并群组进行选择,定义同样的CSS属性,这大大的提高了编码效率,同时也减少了CSS文件的体积。

[2]后代选择器

后代选择器也称为包含选择器,用来选择特定元素或元素组的后代,将对父元素的选择放在前面,对子元素的选择放在后面,中间加一个空格分开。

.d1 #d2

{

color:blue;

}

在HTML页中:

<div class="d1" id="d2">文字</div>     文字颜色变为蓝色

后代选择器是一种很有用的选择器,使用后代选择器可以更加精确的定位元素。

转载于:https://www.cnblogs.com/big-lll/p/6648518.html

相关文章:

Hadoop学习笔记之三 数据流向

http://hadoop.apache.org/docs/r1.2.1/api/index.html 最基本的&#xff1a; 1. 文本文件的解析 2. 序列文件的解析 toString会将Byte数组中的内存数据 按照字节间隔以字符的形式显示出来。 文本文件多事利用已有的字符处理类&#xff0c; 序列文件多事创建byte数组&#xff0…

[微信小程序]星级评分和展示(详细注释附效果图)

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文&#xff1a; 星级评分分成两种情况: 一:展示后台给的评分数据 二:用户点击第几颗星星就显示为几星评分; <!--pages/test/test.wxml--> <view> <view>一:显示后台给的评分</…

uber_这就是我本可以免费骑Uber的方式

uberby AppSecure通过AppSecure 这就是我本可以免费骑Uber的方式 (Here’s how I could’ve ridden for free with Uber) 摘要 (Summary) This post is about a critical bug on Uber which could have been used by hackers to get unlimited free Uber rides anywhere in th…

磁盘I/O 监控 iostat

iostat -cdxm 2 5 dm-4 如果没有这个命令&#xff0c;需要安装sysstat 包。 Usage: iostat [ options ] [ <interval> [ <count> ] ]Options are:[ -c ] [ -d ] [ -N ] [ -n ] [ -h ] [ -k | -m ] [ -t ] [ -V ] [ -x ] [ -z ][ <device> [...] | ALL ] [ -p…

[微信小程序]物流信息样式加动画效果(源代码附效果图)

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文&#xff1a; 效果图片:(信息仅为示例) <!--pages/order/order_wl.wxml--> <view classpage_row top><image classgoods src../../images/dsh.png></image><view cl…

在 Ubuntu 14.04 Chrome中安装Flash Player(转)

在 Ubuntu 14.04 中安装 Pepper Flash Player For Chromium 一个 Pepper Flash Player For Chromium 的安装器已经被 Ubuntu14.04 的官方源收录。Flash Player For Linux 自11.2 起已经停止更新&#xff0c;目前 Linux 平台下面的 Flash Player 只能依靠 Google Chrom 的 PPAPI…

数据结构显示树的所有结点_您需要了解的有关树数据结构的所有信息

数据结构显示树的所有结点When you first learn to code, it’s common to learn arrays as the “main data structure.”第一次学习编码时&#xff0c;通常将数组学习为“主要数据结构”。 Eventually, you will learn about hash tables too. If you are pursuing a Comput…

Unity应用架构设计(9)——构建统一的 Repository

谈到 『Repository』 仓储模式&#xff0c;第一映像就是封装了对数据的访问和持久化。Repository 模式的理念核心是定义了一个规范&#xff0c;即接口『Interface』&#xff0c;在这个规范里面定义了访问以及持久化数据的行为。开发者只要对接口进行特定的实现就可以满足对不同…

PHP连接数据库并创建一个表

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 <html> <body><form action"test.class.php" method"post"> title: <input type"text" name"title"><br> centent: <input t…

MyBatis 入门

什么是 MyBatis &#xff1f; MyBatis 是支持定制化 SQL、存储过程以及高级映射的优秀的持久层框架。MyBatis 避免了几乎所有的 JDBC 代码和手工设置参数以及抽取结果集。MyBatis 使用简单的 XML 或注解来配置和映射基本体&#xff0c;将接口和 Java 的 POJOs(Plain Old Java O…

cms基于nodejs_我如何使基于CMS的网站脱机工作

cms基于nodejsInterested in learning JavaScript? Get my ebook at jshandbook.com有兴趣学习JavaScript吗&#xff1f; 在jshandbook.com上获取我的电子书 This case study explains how I added the capability of working offline to the writesoftware.org website (whic…

how-to-cartoon-ify-an-image-programmatically

http://stackoverflow.com/questions/1357403/how-to-cartoon-ify-an-image-programmatically 转载于:https://www.cnblogs.com/guochen/p/6655333.html

Android Studio 快捷键

2015.02.05补充代码重构快捷键 Alt回车 导入包 自动修正CtrlN 查找类​CtrlShiftN 查找文件CtrlAltL 格式化代码CtrlAltO 优化导入的类和包AltInsert 生成代码(如get,set方法,构造函数等)CtrlE或者AltShiftC 最近更改的代码CtrlR 替换文本CtrlF 查找文本CtrlShiftSpace 自动补全…

【微信小程序】异步请求,权重,自适应宽度并折行,颜色渐变,绝对定位

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文&#xff1a; 写这篇博文主要是为了能够给到大家做类似功能一些启迪&#xff0c;下面效果图中就是代码实现的效果&#xff0c;其中用到的技巧点还是比较多的&#xff0c; <!--pages/demo_list/d…

服务器部署基础知识_我在生产部署期间学到的知识

服务器部署基础知识by Shruti Tanwar通过Shruti Tanwar 我在生产部署期间学到的知识 (What I learned during production deployment) Production deployment. The final stage of every project. When all the hard work you’ve put in over the course of time goes live t…

STM32 KEIL中 负数绝对值处理

使用数码管显示负温度时需要把负数转换为绝对值 #include<math.h> 使用abs 或者自己写函数 #define ABS(x) ((x)>0?(x):-(x)))转载于:https://www.cnblogs.com/yekongdexingxing/p/6657371.html

js数组按照下标对象的属性排序

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 根据数组中某个参数的值的大小进行升序 <script type"text/javascript">function compare(val) {return function (a, b) {var value1 a[val];var value2 b[val];return value1…

window 下相关命令

1. 启动window服务(各种应用启动设置的地方)命令方式&#xff1a; 1). window 按钮(输入CMD的地方)处输入&#xff1a;services.msc &#xff0c;然后执行。 // 输入命令正确&#xff0c;上面的待选框中会出现要执行的命令。msc 可以理解为Microsoft client 2). 计算机 -- …

javascript语法糖_语法糖和JavaScript糖尿病

javascript语法糖by Ryan Yurkanin瑞安尤卡宁(Ryan Yurkanin) 语法糖和JavaScript糖尿病 (Syntactic Sugar and JavaScript Diabetes) Syntactic sugar is shorthand for communicating a larger thought in a programming language.语法糖是用编程语言传达更大思想的简写。 …

《DSP using MATLAB》示例Example7.23

代码&#xff1a; wp 0.2*pi; ws 0.3*pi; Rp 0.25; As 50; [delta1, delta2] db2delta(Rp, As);[N, f, m, weights] firpmord([wp, ws]/pi, [1, 0], [delta1, delta2]);N f m weightsh firpm(N, f, m, weights); [db, mag, pha, grd, w] freqz_m(h, [1]);delta_w 2*pi…

css画图笔记

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文&#xff1a; 在网页中&#xff0c;经常会用到各种Icon&#xff0c;如果老是麻烦设计狮画出来不免有些不好意思&#xff0c;所以有时候我们也可以用CSS写出各种简单的形状&#xff0c;一来可以减轻…

Web前端开发最佳实践(8):还没有给CSS样式排序?其实你可以更专业一些

前言 CSS样式排序是指按照一定的规则排列CSS样式属性的定义&#xff0c;排序并不会影响CSS样式的功能和性能&#xff0c;只是让代码看起来更加整洁。CSS代码的逻辑性并不强&#xff0c;一般的开发者写CSS样式也很随意&#xff0c;所以如果不借助工具&#xff0c;不太容易按照既…

超越Android:Kotlin在后端的工作方式

by Adam Arold亚当阿罗德(Adam Arold) 超越Android&#xff1a;Kotlin在后端的工作方式 (Going Beyond Android: how Kotlin works on the Backend) This article is part of a series.本文是系列文章的一部分。 While most developers use Kotlin on Android, it is also a …

词汇的理解 —— 汉译英(术语)

词汇的理解 —— 英译汉 1. 名词 机制&#xff1a;mechanism&#xff0c;系统&#xff1a;system&#xff1b;2. 动词 融资&#xff1a;financing&#xff1b;制动&#xff1a;braking&#xff0c;就是“刹车”&#xff1b;3. 音乐与乐器 horn&#xff1a;喇叭&#xff0c;号角…

Swift从零开始学习_08(代理协议传值)

Swift中的代理协议的写法. 这是第一个页面有一个button和一个label, button点击跳到下一个页面. 第二个页面有一个输入框和一个按钮, 点击按钮把输入框里的内容设置为第一个页面label的内容.效果如下 接下来是代码部分.跟OC的写法还是一样的.这里不再写第一个页面的那些UI的…

[微信小程序]商城之购买商品数量实现

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文&#xff1a; 这里有三种变更数量的方式&#xff0c; 加号&#xff0c;减号&#xff0c;input输入 &#xff0c; 这里做了限制&#xff0c;数量不能小于等于0并且不能超过现有库存&#xff0c;下面是…

测试nginx网站代码_在40行以下代码中使用NGINX进行A / B测试

测试nginx网站代码by Nitish Phanse由Nitish Phanse 在40行以下代码中使用NGINX进行A / B测试 (A/B testing with NGINX in under 40 lines of code) A/B Testing, has enabled designers and product managers to get a deep insight into user behavioral patterns.A / B测试…

HttpServletResponse,HttpServletRequest详解

HttpServletResponse,HttpServletRequest详解 1、相关的接口 HttpServletRequest HttpServletRequest接口最常用的方法就是获得请求中的参数&#xff0c;这些参数一般是客户端表单中的数据。同时&#xff0c;HttpServletRequest接口可以获取由客户端传送的名称&#xff0c;也可…

[微信小程序]this.setData , that.setData , this.data.val三者之间的区别和作用

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文&#xff1a; 1.this.setData({ }) <view bindtouchmove"tap_drag" bindtouchend"tap_end" bindtouchstart"tap_start" class"page-top" style"{…

jQuery(一)引入

一、jQuery简介 jQuery是一个兼容多浏览器的javascript库&#xff0c;核心理念是write less,do more(写得更少,做得更多) 二、安装 2.1、下载 下载地址&#xff1a;http://jquery.com/download/ 2.2、引入 在页面头部加入 <head> <meta http-equiv"Content-Type&…