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 ...
- ubuntu 使用 vsftpd 基于系统用户配置相互隔离的 ftp (ftps) 服务
我们在日常使用 UbuntuServer 服务器时,经常会直接使用基于 ssh 的 sftp 连接服务器直接进行文件上传和下载,不过这个方式其实有一定的安全隐患,当一个团队有多个人员,需要连接服务器 ...
- nginx反向代理做负载均衡以及使用redis实现session共享配置详解
1.为什么要用nginx做负载均衡? 首先我们要知道用单机tomcat做的网站,比较理想的状态下能够承受的并发访问在150到200, 按照并发访问量占总用户数的5%到10%技术,单点tomcat的用户 ...
- 谈谈DDD
从战略到战术,领域驱动设计(Domain Driven Design,DDD)给出了诸多关于软件架构.设计.建模与编码的方法和模式,以用于应对业务复杂度.然而,许多开发人员对于 DDD 的价值仍然心存 ...
- asp.net core + entity framework core 多数据库类型支持实战
根据微软官方文档的说法,有两种方法可以实现在一个app中同时适应多种不同类型的数据库,并且全部支持migrations操作.其一,使用两个dbcontext:其二,修改migration文件,添加特定 ...
- 这一份MySQL书单，可以帮你搞定90%以上的面试题！
- HDU 2016 （水）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2016 题目大意:给你 n 个数,把最小的数和第一个数字互换,然后输出 解题思路: 很水,开数组,遍历并 ...
- python pip下载设置
安装命名为 pip install -i 网址 所需要安装的库名例如:pip install -i https://pypi.tuna.tsinghua.edu.cn/simple requests ...
- .Net Core3.0 WebApi 项目框架搭建 五: 轻量型ORM+异步泛型仓储
.Net Core3.0 WebApi 项目框架搭建:目录 SqlSugar介绍 SqlSugar是国人开发者开发的一款基于.NET的ORM框架,是可以运行在.NET 4.+ & .NET C ...
- .Net Core3.0 WebApi 项目框架搭建 三:读取appsettings.json
.Net Core3.0 WebApi 项目框架搭建:目录 appsettings.json 我们在写项目时往往会把一些经常变动的,可能会变动的参数写到配置文件.数据库中等可以存储数据且方便配置的地方 ...