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 ...
随机推荐
- RF（页面断言）
一.RF中断言方式 title should be(断言title与预期指定的title内容相等) Open Browser https://www.baidu.com/ gc Title Shoul ...
- 前端——Vue.js学习总结一
一.什么是Vue.js 1.Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架 2.Vue.js 是前端的主流框架之一,和Angular.js.React.js 一起,并成为前端 ...
- Three Blocks Palindrome (easy version)[暴力-预处理]
给定一个数组,找出最长的子序列,满足 a,a,..a,b,b,..b,a,a,..a 前面的a和后面的a都要是x个,中间的b是y个. 其中,x>=0且y>=0. \(\color{Red} ...
- 高性能mysql第三版读书笔记3
innodb以前不支持高并发,在搞病房下就是悲剧,全部卡在mutex(缓冲池mutex)上,现在通过线程调度器控制线程怎么进入内核访问数据,参数为innodb_thread_concurrency,它 ...
- 白话马尔科夫链蒙特卡罗方法(MCMC)
前言 你清茶园不是人待的地方! 里面的个个都是人才,说话又好听--就是我太菜了啥也听不懂,这次期中还考的贼**烂,太让人郁闷了. 最近课上讲这个马尔科夫链蒙特卡罗方法,我也学得一塌糊涂.这时我猛然想起 ...
- C#MVC通过AJAX调用API方法进行上传下载
//这是写的一个类,具体是上传图片的上传和下载 public class FileResult { public int Code { get; set; } pub ...
- [hdu4670 Cube number on a tree]点分治
题意:给一个N个带权节点的树,权值以给定的K个素数为因子,求路径上节点乘积为立方数的路径条数 思路:立方数的性质是每个因子的个数为3的倍数,那么每个因子只需要保存0-2三个状态即可,然后路径就可以转化 ...
- 这么简单的ES索引生命周期管理，不了解一下吗～
对于日志或指标(metric)类时序性强的ES索引,因为数据量大,并且写入和查询大多都是近期时间内的数据.我们可以采用hot-warm-cold架构将索引数据切分成hot/warm/cold的索引.h ...
- 神奇的'license': 'AGPL 3.0'标签报错
在__minifest__.py中,放了license标签,然后整个模块就报错了. 注释掉这个标签就好了.
- PAT1027 Colors in Mars (20分) 10进制转13进制
题目 People in Mars represent the colors in their computers in a similar way as the Earth people. That ...