html5学习之路_007
CSS概述
- CSS指层叠样式表
- CSS样式表极大地提高了工作效率
CSS基础语法
selector {
property:value
}
例：hi {color:red; font-size:14px}
属性大于1个之后，属性之间用分号隔开
如果值大于1个单词，则需要加上引号：
p{font-family: "sans serif";}
CSS高级语法
1、选择器分组：
h1,h2,h3,h4,h5,h6{color:red;}，每个标题都加上了color样式
2、继承：
body{
color:green;
}
body中每个自身没有单独定义样式的属性都会被加上color样式，而自身有单独定义样式的不变。
CSS派生选择器
通过依据元素在其位置的上下文关系来定义样式
<body>
<p><strong>hello world</strong></p>
<ul>
<li><strong>hello world</strong></li>
</ul> </body>
创建一个css文件，在css中定义样式，在html中引入css。
li strong{
color: red;
}
strong{
color: blueviolet;
}
<li>中hello world颜色为blueviolet，<p>中的变为red，如图：
CSSid选择器
1、选择器
- id选择器可以为标有id的HTML元素指定特定的样式
- id选择器以“#”来定义
2、id选择器和派生选择器：
目前比较常用的方式是id选择器常常用于建立派生选择器。
<body>
<p id="pid">hello css<a href="http://www.baidu.com">百度一下</a></p>
<div id="divid">
这是一个divid
<p>第二个div</p>
</div>
</body>
再引入一个css文件
#pid a{
color: cadetblue;
}
#divid p{
color: red;
}
运行之后的结果如图“
CSS类选择器
- 类选择器
类选择器以一个点显示
- class也可以用作派生选择器
<body>
<p class="pclass">class效果<a href="http://www.baidu.com">百度一下</a></p>
<div class="divclass">
hello div
<p>这是一个p标签</p>
</div>
</body>
再引入一个css文件
.pclass a{
color: chartreuse;
}
.divclass p{
color: green;;
}
运行结果如图：
CSS属性选择器
- 属性选择器
对带有指定属性的HTML元素设置样式
- 属性和值选择器
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
[title]{
color:blue;
}
[title=tt]{
color:red;
}
</style>
</head>
<body>
<p title="t">属性选择器</p>
<p title="tt">属性与值选择器</p>
</body>
运行结果：
本站文章为宝宝巴士 SD.Team原创，转载务必在明显处注明：（作者官方网站：宝宝巴士)
转载自【宝宝巴士SuperDo团队】 原文链接: http://www.cnblogs.com/superdo/p/4805770.html
html5学习之路_007的更多相关文章
- HTML5学习之路
出于公司项目需求,我现在开始学习html5,虽然零零散散有过一点,比如说新出的语义化标签,本地存储之类的,但是从来都没有系统的去了解.
- html5学习之路_001
安装环境 安装intellij idea作为开发环境 打开环境 新建一个html文件,打开之后出现代码框架,再次基础上继续编码即可,例如: <!DOCTYPE html> <html ...
- html5学习之路_006
表单与php交互 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- html5学习之路_005
PHP环境搭建 1.下载安装xampp 2.打开xampp,开启mysql和apache 3.在开发环境eclips中下载插件 4.安装php 5.切换到php开发环境 6.创建一个php项目 7.打 ...
- html5学习之路_004
HTML表单 表单用于获取不同类型的用户输入 常用表单标签 下面为一个简单的表单: <!DOCTYPE html> <html> <head lang="en& ...
- html5学习之路_003
html布局 使用<div>元素布局 使用<table>元素布局 <div>元素布局 <!DOCTYPE html> <html> < ...
- html5学习之路_002
html块 html块元素 块元素在显示时,通常会以新行开始 如:<h1>.<p>.<ul> html内联元素 内联元素头通常不会以新行开始 如:<b> ...
- 8年，从2D到3D，我的学习之路
Mickey 写了一篇 <一个本科毕业生创业两年的感悟>,从他的视角,总结了我们合作的两年经历. 我也来写一篇,介绍我的学习之路,希望对大家有所帮助,谢谢大家- 我的学习方法 1.直接从0 ...
- springboot 学习之路 8 (整合websocket(1))
目录:[持续更新.....] spring 部分常用注解 spring boot 学习之路1(简单入门) spring boot 学习之路2(注解介绍) spring boot 学习之路3( 集成my ...
随机推荐
- 在Windows中快速配置vim
vim原本是在Linux中的编辑器,如果使用熟练写代码速度可以远高于其它编辑器 当然很多OI比赛也会要求在Linux中进行 然而: 想学Linux,首先要有一个Linux,但有了Linux,这个直播间 ...
- MySQL 索引、视图
1.索引 什么是索引 一个索引是存储在表中的数据结构,索引在表的列名上创建.索引中包含了一个列的值,这些值保存在一个数据结构中 索引优缺点 索引大大提高了查询速度 会降低更新表的速度,如对表进行INS ...
- Gitlab常规操作
一.Git和SVN的区别 和SVN类似,Git是一个版本控制系统(Version Control System,VCS),不同的是SVN为集中式版本控制系统,为单一的集中管理的服务器,保存所有文件的修 ...
- P1220 关路灯(提高+)
以下内容转自z2415445508 只是为了方便自己复习而已 题目传送门-->关路灯 我是一条憨憨的分割线 关灯不需要额外的时间,经过了灯就关了.但是可能折返回去关某一个大灯会比继续往下走关接下 ...
- HTTPS简单介绍
在HTTP协议中有可能存在信息窃听或者身份伪装等问题,使用HTTPS协议通信机制可以有效地防止这些问题. 1 HTTP协议的缺点 通信使用明文,内容可能被窃听 不用验证通信方的身份,因此可能会遭遇伪装 ...
- 【Spark】快来学习RDD的创建以及操作方式吧！
目录 RDD的创建 三种方式 从一个集合中创建 从文件中创建 从其他的RDD转化而来 RDD编程常用API 算子分类 Transformation 概述 帮助文档 常用Transformation表 ...
- 目前校园百晓生APP与CSDN软件的对比
不忘初心.注入灵魂 设计之初 在做校园百晓生该APP时,初心是为校园的同学提供便捷的查询校园信息的服务,确实目前的软件已经实现了该功能,但是总感觉缺少一些灵魂,感觉大部分人渴望的重点在于信息而不是自己 ...
- [whu1568]dp优化
http://acm.whu.edu.cn/land/problem/detail?problem_id=1568 思路:先将所有数分解,得到2,3,5,7的个数,转化为用这些2,3,5,7" ...
- 解决：idea中右键项目找不到subversion
2019.02版IDEA,刚刚发现更新不了项目,但是我记得之前的项目是可以直接更新的.然后,我打开之前的项目找到相关项,对比了一下,找到了方法: file--settings--Version Con ...
- opengl简单入门实例
实现任务目标: 使用纹理贴图,增强可视效果 应用坐标变换,实现场景中不同物体重建 采用双缓冲技术,实现场景实时绘制 具有一定的鼠标.键盘交互功能 先放效果 鼠标的交互功能有:右键暂停转动,左键继续转动 ...