[Learn Notes] CSS学习笔记
1.1 有了 CSS,就可以控制页面的外观并且将文档的表现部分与内容分隔开
2 更易于保持各个界面的风格的一致性
2.1 这个界面可以使用相同的CSS
3 标记
3.1 id 和 类名
3.2 div 和 span
div 可以用来对块级元素进行分组,而 span 可以用来对行内元素进行分组或标识
4 为样式找到目标
有效且结构良好的文档为应用样式提供了一个框架。要想使用 CSS 将样式应用于特定的(X)HTML 元素, 需要有办法找到这个元素。在 CSS 中,执行这一任务的样式规则部分称为选择器(selector)。
4.1 常用的选择器
4.1.1 类型选择器
类型选择器有时候也称为元素选择器或简单选择器
p { color: black;}
a { text-decoration: underline;}
h1 { fon-weight: bold;}
4.1.2 后代选择器可用来寻找特定元素或元素组的后代
后代选择器由其他两个选择器之间的空格表示。在下面的示例中,只在作为列表项的后 代的锚元素上应用样式,而段落中的锚不受影响。
li a { text-decoration: none;}
4.1.3 ID 选择器由一个#字符表示,类选择器由一个点号表示
#intro { font-weight: bold;}
.dateposted { color: green;}
<p id="intro">some text</p>
<p class="dateposted">24/3/2006</p>
4.1.4 伪类
/*maks all unvisited links blue*/
a: like{ color: blue;}
/*makes all visited links green*/
a: visited { color: green;}
/*maks links red when hovered or activated*/
a: hover, a: active{ color: red;}
/*maks table rows red when hovered over*/
tr: hover { background-color: red;}
/*maks input elements yellow when focus is applied*/
input: focus{ background-color: yellow;}
:link 和:visited 称为链接伪类,只能应用于锚元素。:hover、:active 和:focus 称为动态伪类,理论 上可以应用于任何元素。不幸的是,只有少数现代浏览器(比如 Firefox)支持这种功能。IE 6 和更低版本 只注意应用于锚链接的:active 和:hover 选择器,完全忽略: focus。
4.1.5 通用选择器
*{ padding: 0; margin: 0; }
我的第一个练习:
<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
background:green url(w3css.gif) no-repeat;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
/*text-align:right*/ /*this is comment out*/
}/*It is really cool*/
#myBox
{
margin: 10px;
padding: 5px;
width: 200px;
background-color: red;
color:orange;
}
</style>
</head><body><h1>CSS example!</h1>
<p id=myBox>This is a paragraph.</p></body>
</html>
转载于:https://www.cnblogs.com/jalenwang/archive/2012/01/07/2316025.html
[Learn Notes] CSS学习笔记相关推荐
- [Learn Notes] PowerShell学习笔记
这几天抽空学习了一下PowerShell,领略了其强大之处. 本想好好的写点笔记,到网上一翻,还真有现成的笔记(http://www.ansatt.hig.no/erikh/tutorial-powe ...
- CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
- 前端篇--------1.css学习笔记
1.css 单行文本换行溢出解决方案(css三件套) white-space:nowrap overflow:hidden text-overflow:ellipsis 2.css m ...
- HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
- CSS学习笔记-04 a标签-导航练习
个人练习,各位大神勿笑 .. <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
- div+css学习笔记一(转)
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中 背景图片 ie6 ie7 margin 杂谈 分类: 网页制作 1.IE6中用了float之后导致m ...
最新文章
- 简单的复数运算(类和对象)_JAVA
- mysql opaq数据库_MySql数据库
- 小米android11新特性,小米已推送安卓11测试版 目前支持三款机型
- 自定义的Sort对象
- Layout布局(补充)
- nginx配置文件详细解读
- clientdataset 遍历字段_Delphi TClientDataSet[五]: 读取数据
- JDK8的JVM优化实操及部分原理加深理解
- Word编写论文十大技巧
- Flex与.NET互操作系列文章索引
- azure未连接_查找影响Azure成本的未使用资源
- Python利用Graphviz画图
- 第三讲 系统建模与仿真
- 我是这么自学Java的
- IDA Pro使用学习研究笔记(一)——IDA View
- 【LaTeX入门】15 在文章中添加脚注
- 锁定计算机和睡眠有什么区别,电脑win7休眠和睡眠有什么区别?
- Apache Ranger:统一授权管理框架
- Linux报错:-bash: 路径xx: No such file or directory解决方法
- 温控仪C语言程序,模糊PID控制温控系统设计C语言程序代码
热门文章
- jQuery实现动态地获取系统时间
- JS 基础知识点及常考面试题(一)
- JavaScript算法(实例九)整数的置换 / 求s=a+aa+aaa+aaaa+aa...a的值 / 自守数
- 7-107 汉诺塔的非递归实现 (25 分)
- 呼伦贝尔学院计算机宿舍,2020年呼伦贝尔学院新生宿舍环境条件,大一新生男生女生宿舍内部图片【多图】...
- oracle dbms调度程序,Oracle 调度程序作业( dbms_scheduler )(zt)
- c语言ntc程序,NTC热敏电阻测温度 单片机C和汇编源程序
- java mathrandom函数_java Math数学工具及Random随机函数
- ArcGIS API For Javascript :如何动态生成 token 加载权限分配的地图服务?
- 「2017 山东一轮集训 Day6」子序列(矩阵快速幂)