【Learn】CSS定义
CSS基础语法
本文用于介绍CSS相关的知识,用于记录自己的学习笔记。由于我已经熟悉了部分的HTML,所以相关的概念也不在这里进行描述了,直接写自己的一些心得感悟。
1.CSS规则
CSS是由两个主要的部分组成
- 选择器
- 一条或者多条的声明
- 声明由属性和值组成
h1 {color:red; font-size:14px;}
1.1 值的不同写法
p {color: #ff0000;}
p {color:#f00}
p {color: rgb(255,0,0)}
p {color: rgb(100%,0%,0%)}
1.2 选择器的分组
选择器分组,可以让被分组的选择器有相同的声明。
h1,h2,h3,h4,h5{
color:green;
}
1.3 继承及其问题
2. 选择器
2.1 派生选择器
可以对某一个标记内的另外一个标记进行特殊格式设定
ls strong{
font-style:italic;
font-weight:normal;
}
2.2 id选择器
id选择器以#来定义,可以用来定义id等于特定值时显示不同的状态
#red {color:red;}
#green {color:green;}
id选择器作用效果为:
<p id="red">这个段落是红色</p>
<p id="green">这个段落是绿色</p>
id选择器可以和派生选择器结合,生成特定id下的特殊样式
#sidebar p{
font-style:italic;
text-align:right;
margin-top:0.5em;
}
2.3 CSS类选择器
类选择器同id选择器类似,可以针对特定的样式类来进行渲染
.center {text-align:center}
实际应用场景为
<h1 class="center">This heading will be center-aligned</h1>
2.4 属性选择器
2.4.1 单个的属性选择器
CSS定义
[title]
{ color:red }
HTML映射
<h2 title="Hello">Hello,World!</h2>
2.4.2 属性和值选择器
[title=W3CSchool]{
border:5px solid blue;
}
2.4.3 属性和值选择器-多个值
[title~=hello]{color:red;}
实际应用中,只要title带有hello字眼都可以实施渲染
<h2 title="world hello">Hello1 world</h2>
CSS常用标记
背景
p {background-color:gray;}
p {background-color:gray;padding:20px;}
背景图片
body {background-image:url(/i/eg_bg.gif);}
【Learn】CSS定义的更多相关文章
- 用Less CSS定义常用的CSS3效果函数
定义圆角及调用 /* 定义圆角 @radius 圆角大小 */ .round(@radius:5px){ border-radius:@radius; -webkit-border-radius: @ ...
- CSS定义字体间距 字体行与行间距
CSS定义字体行间距 line-height:xxpx; CSS定义字体间距 下面我们讲述一下CSS的文本属性,还是先来看一下文本属性的详细列表: 属性 属性含义 属性值 Word-s ...
- (转)CSS定义字体间距 字体行与行间距
源网址:http://www.cnblogs.com/jian1982/archive/2010/07/03/1770349.html CSS定义字体行间距 line-height:xxpx; CSS ...
- font-family:黑体;导致css定义全部不起作用
css文件里font-family: "黑体";这句会导致后面的css定义全部不起作用了. 只要把font-family: "黑体"; 改成 font-fami ...
- Learn CSS
韩顺平老师的CSS讲的还是很简单的,仅作入门. div+css的介绍 div+css是什么. div元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素. css是 ...
- CSS定义选择器
ID与类 层叠 分组 继承 上下文选择器 子类选择器 其他选择器 结构与注释 20.1 ID与类 选择器是用于控制页面设计的样式.即ID选择器何类选择器. 一直以来,许多开发人员经常将ID与类混淆,或 ...
- CSS定义网页滚动条
(一)滚动条样式主要涉及到如下CSS属性: overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容overflow: auto; 在需要时内容会自动添加滚动条overflow ...
- 20, CSS 定义选择器
1. ID 与类 2. 层叠 3. 分组 4. 继承 5. 上下文选择器 6. 子类选择器 7. 其他选择器 8. 结构与注释 20.1 ID 与类 选择器是用于控制页面设计的样式.即 ID 选择器何 ...
- css定义好看的垂直滚动条
滚动条的css样式主要有三部分组成: 1.::-webkit-scrollbar 定义了滚动条整体的样式: 2.::-webkit-scrollbar-thumb 滑块部分: 3. ...
随机推荐
- HttpHelper类及调用
首先列出HttpHelper类 /// <summary> /// Http操作类 /// </summary> public class HttpHelper { priva ...
- 洛谷 P2900 [USACO08MAR]土地征用Land Acquisition 解题报告
P2900 [USACO08MAR]土地征用Land Acquisition 题目描述 约翰准备扩大他的农场,眼前他正在考虑购买N块长方形的土地.如果约翰单买一块土 地,价格就是土地的面积.但他可以选 ...
- 解决win7 64位操作系统下安装PL/SQL后连接报错问题: make sure you have the 32 bits oracle client installed
1. 在Oracle官网(http://www.oracle.com/technetwork/topics/winsoft-085727.html)下载文件: instantclient-basic- ...
- bzoj1907: 树的路径覆盖(树形DP)
一眼题... f[i][0]表示在i连接一个子树的最小值,f[i][1]表示在i连接两个子树的最小值,随便转移... 样例挺强的1A了美滋滋... UPD:学习了2314的写法之后短了好多T T #i ...
- 解题:POI 2015 Pieczęć
题面 发现好像没有什么好做法,那就模拟么=.= 以印章左上角的'x'为基准,记录印章上'x'的相对位置模拟.记录相对位置是因为可能有这种情况↓ 直接模拟是会漏掉的=.= #include<cst ...
- oracle、mysql、db2三大数据库分页方法的整理
最近项目中经常会涉及到代码中支持三种数据库的分页的功能,自己整理了关于三种数据库的分页的写法,分享给大家,以供大家使用.希望能帮到更多的码友! 先来看一个代码片段: String page = ala ...
- jar包下载地址(fasterxml.jackson)
jar包下载地址(fasterxml.jackson) Home » com.fasterxml.jackson » core jar包下载地址 https://mvnrepository.com/a ...
- Dell 戴尔预装Windows8改成Windows7
UEFI模式启动: 添加启动方式,正确路径为: 另外: Ubuntu启动gpt由gpt10变为gpt9 dd
- Java面试题:多继承
招聘和面试对开发经理来说是一个无尽头的工作,虽然有时你可以从HR这边获得一些帮助,但是最后还是得由你来拍板,或者就像另一篇文章"Java 面试题:写一个字符串的反转"所说: 面试开 ...
- jquery收集页面参数生成xml,用于与server做数据交互
本博客是自己在学习和工作途中的积累与总结,仅供自己参考,也欢迎大家转载,转载时请注明出处. http://www.cnblogs.com/king-xg/p/6382603.html 通过jquery ...