CSS 再学习,基础篇
语法
h1 {color:red; font-size:14px;}
共享声明
h1,h2,h3,h4,h5,h6 {color: green;
}
继承
通过 CSS 继承,子元素将继承最高级元素(在本例中是 body)所拥有的属性(这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd)。不需要另外的规则,所有 body 的子元素都应该显示 Verdana 字体,子元素的子元素也一样。
如果你不希望 "Verdana, sans-serif" 字体被所有的子元素继承,又该怎么做呢?比方说,你希望段落的字体是 Times。没问题。创建一个针对 p 的特殊规则,这样它就会摆脱父元素的规则。
body {font-family: Verdana, sans-serif;
}td, ul, ol, ul, li, dl, dt, dd {font-family: Verdana, sans-serif;
}p {font-family: Times, "Times New Roman", serif;
}
派生
strong {color: red;}h2 {color: red;}h2 strong {color: blue;}
id选择器
#red {color:red;}
#green {color:green;}
id 选择器和派生选择器
#sidebar p {font-style: italic;text-align: right;margin-top: 0.5em;
}
类选择器
.center {text-align: center}
class 也可被用作派生选择器
.fancy td {color: #f60;background: #666;
}
类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。
元素也可以基于它们的类而被选择:
td.fancy {color: #f60;background: #666;
}
<td class="fancy">
那些以 fancy 标注的单元格都会是带有灰色背景的橙色。那些没有被分配名为 fancy 的类的单元格不会受这条规则的影响。
属性选择器
对带有指定属性的 HTML 元素设置样式。
<style>
[lang|=en]
{
background:yellow;
}
</style><p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
<p lang="us">Hi!</p>
<p lang="zh">nihao!</p>
只有中间是横杠才有效。
选择器 | 描述 |
---|---|
[attribute] | 用于选取带有指定属性的元素。 |
[attribute=value] | 用于选取带有指定属性和值的元素。 |
[attribute~=value] | 用于选取属性值中包含指定词汇的元素。 |
[attribute|=value] | 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。 |
[attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
[attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
[attribute*=value] | 匹配属性值中包含指定值的每个元素。 |
引入样式表
引入(优)
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
内部(次之)
<head>
<style type="text/css">hr {color: sienna;}p {margin-left: 20px;}body {background-image: url("images/back40.gif");}
</style>
</head>
内联(不建议)
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。
例如,外部样式表拥有针对 h3 选择器的三个属性:
h3 {color: red;text-align: left;font-size: 8pt;}
而内部样式表拥有针对 h3 选择器的两个属性:
h3 {text-align: right; font-size: 20pt;}
假如拥有内部样式表的这个页面同时与外部样式表链接,那么 h3 得到的样式是:
color: red;
text-align: right;
font-size: 20pt;
即颜色属性将被继承于外部样式表,而文字排列(text-alignment)和字体尺寸(font-size)会被内部样式表中的规则取代。
CSS 再学习,基础篇相关推荐
- python传递参数格式_Python语言学习基础篇之Python发送Post请求之根据参数位置传参、数据类型、不同方式传参...
本文主要介绍了Python语言学习基础篇之Python发送Post请求之根据参数位置传参.数据类型.不同方式传参,通过具体的内容向大家展现,希望对大家Python语言的学习有所帮助. 目录 一.验证 ...
- LINUX学习基础篇(十五)软件包管理
LINUX学习基础篇(十五)软件包管理 软件包管理 软件包分类 源码包 二进制包 选择 依赖性 rpm包安装 rpm包命名规则 rpm包安装和卸载 服务命令 rpm查询命令 验证 数字证书 rpm中文 ...
- shell学习-基础篇
shell学习-基础篇 Linux? 挺好的! shell是基础- 最近利用闲暇时间在 http://c.biancheng.net/ 网站上学习了shell基础篇,整理成博客以加深理解 文章目录 L ...
- 强化学习基础篇(五):Dyna-Q 算法
强化学习基础篇(五):Dyna-Q 算法 (Dynamic Programming) 1. 简介 2. Dyna-Q 3. Dyna-Q 代码实践 4. 小结 文章转于 伯禹学习平台-动手学强化学习 ...
- SQL学习——基础篇
SQL学习--基础篇 0. 数据库的概念 0.1 数据库设计的基本步骤 1. SQL的语法特点 2. SQL数据类型 2.1 常用类型 2.2 text类型 2.3 number类型 2.4 date ...
- 深度学习基础篇(一)
深度学习基础篇(一) Part I 深度学习基础 本书1-4章将带你了解一些基本概念:什么是深度学习,它可以用来做什么以及它如何工作.此外,熟悉使用深度学习解决数据问题的典型工作流程.如果还没怎么了解 ...
- 回溯法采用的搜索策略_强化学习基础篇(三十四)基于模拟的搜索算法
强化学习基础篇(三十四)基于模拟的搜索算法 上一篇Dyna算法是基于真实经验数据和模拟经验数据来解决马尔科夫决策过程的问题.本篇将结合前向搜索和采样法,构建更加高效的搜索规划算法,即基于模拟的搜索算法 ...
- LINUX学习基础篇(六)帮助命令
LINUX学习基础篇(六)帮助命令 帮助命令 man(Manual) info help - -help 帮助命令 man(Manual) 作用:查看联机帮助手册. 执行权限:所有用户. man命令的 ...
- LINUX学习基础篇(十二)痕迹命令
LINUX学习基础篇(十二)痕迹命令 系统痕迹命令 w命令 who命令 last命令 lastlog命令 lastb命令 系统痕迹命令 系统中有一些重要的痕迹日志文件,如/var/log/wtmp./ ...
- 深度学习基础篇【5】从0开始搭建YOLOV5 并进行测试
深度学习基础篇[5] 从0开始搭建 YOLOV5 并进行测试 如何评价YOLO V5,那就必须拿"上一代"YOLO V4来做对照了.先说结论,YOLO V5 在性能上稍弱于YOL ...
最新文章
- 突然想起99年的那次离别
- WebAPI接口安全校验
- 解析ArcFace源码
- Leading and Trailing(数论题)
- npm ERR! code ELIFECYCLE解决方案
- Automatic Diagnostic Repository Command-Interpreter
- 深度学习福利入门到精通第四讲——GoogleNet模型
- 为什么在加油站上班,一个月休3天,工资2000元,却有人干?
- mysql存储过程的一个小例子
- element-ui主表格多选后 二级弹框表格默认全选数据
- oracle rman是干嘛的,我对Oracle RMAN备份的理解
- Python学习视频教程大全
- APISpace 二维码生成器API
- 去健身房健身戴什么耳机好、最适合运动健身的健身房耳机推荐
- 产品经理之需求管理(非原创)
- Debian Bullseye 更新源备份
- 神威超级计算机配置,神威太湖轻型超级计算机配置和性能列表
- 用编译器写的mov ax,[0]指令,执行的实际上是mov ax,0
- MMdetection3d环境搭建、使用MMdetection3d做3D目标检测训练自己的数据集、测试、可视化,以及常见的错误
- AOP机制之环绕通知的见解
热门文章
- php反选全选代码,jQuery中实现全选,反选实例代码 (推荐)
- 2021浙江高考首考成绩查询,浙江2021选考成绩什么时候出成绩?附2021浙江学考成绩查询时间...
- luogu P1962 斐波那契数列
- linux输入子系统
- LiveCoding
- 微信小程序引入npm
- 二叉树前序,中序,后序遍历的迭代实现,实现思路及代码
- java集成开发工具项目_Java项目开发(一)-不借助集成工具创建Java项目并编写编译执行脚本...
- python selenium 点击开始按钮,python selenium-点击页面而不使用next按钮
- 如何查看文件的字符集