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 ...
随机推荐
- 疯子的算法总结14--ST算法（区间最值）
借助倍增和动态规划可以实现O(1)的时间复杂度的查询 预处理: ①区间DP 转移方程 f[i][j] = min(MAX同理)(f[i][j - 1],f[i + ][j - 1]) f[i] ...
- SpringBoot上传文件大小限制
SpringBoot默认上传文件大小不能超过1MB,超过之后会报以下异常: org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSize ...
- FPGA实现-shift_ram_3x3矩阵
shift_ram_3x3-FPGA实现 实现的方法为方法二,可以参考上一节关于中值滤波的介绍 shift_ram核介绍 https://www.cnblogs.com/ninghechuan/p/6 ...
- 05_CSS入门和高级技巧(3)
上节课复习 !important不能影响就近原则,远的标签如果加上!important也干不过近的标签! !important不能影响继承权重是0,通过继承的标签加上!important也干不过直接选 ...
- Java return 关键字
一.基本概念 return一方面用在循环语句中来结束循环,另一方面用来终止函数的执行或者退出类的方法,并把控制权返回该方法的调用者.如果方法有返回类型,则return的返回该类型的值:如果没有返回值, ...
- linux centos7搭建redis-5.0.5
1. 下载redis 1.1 下载地址 http://download.redis.io/releases/ 1.2 安装版本 redis-5.0.5.tar.gz 2. 安装redis 2.1 前置 ...
- [hdu5525 Product]暴力
题意:给定n和a[],令N = ∏(1≤i≤n)ia[i],求N的所有约数的积(取模1e9+7) 思路: 假定N因式分解后的结果是2p1*3p2*5p3*...,如何计算答案呢? 单独看2p1这一项, ...
- [hdu4628 Pieces]二进制子状态，DP
题意:给一个长度为16的字符串,每次从里面删掉一个回文序列,求最少需要几次才能删掉所有字符 思路:二进制表示每个字符的状态,那么从1个状态到另一个状态有两种转移方式,一是枚举所有合法的回文子序列,判断 ...
- [hdu4622 Reincarnation]后缀数组
题意:给一个长度为2000的字符串,10000次询问区间[L,R]内的不同子串的个数 思路:对原串的每个前缀求一边后缀数组,询问[L,R]就变成了询问[L,n]了,即求一个后缀里面出现了多少个不同子串 ...
- 一个小例子学习makefile
前言 makefile推荐资料为陈皓的跟我一起写makefile,需要pdf资源的可以私我 正文 目录结构 ---include ------student.h ---src ------studen ...