[CSS3] 学习笔记-CSS入门基本知识
1、CSS概述
CSS指层叠样式表
CSS样式表极大的提高了工作效率
1）CSS基础语法：
selector{
propery:value
}
例1：h1{color:red;font-size:14px;}
属性大于1个之后，属性之间用分号隔开；如果大于1个单词，需要加上引号：p{font-family:"sans serif";}
2）CSS高级语法
选择器分组：h1,h2,h3,h4,h5,h6{color:red;}
继承：body{
color:green;
}
例子：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href="1.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>
这是一个h1标签的样式
</h1>
<h2>
这是一个h2标签的样式
</h2>
<a>
这是一个a标签的样式
</a>
<h3>
这是一个h3标签的样式
</h3>
</body>
</html>
其中的1.css：
h1, a, h2{
color:blue;font-size:50px;
}
body{
color:red;
}
2、CSS派生选择器
派生选择器：通过依据元素在其位置的上下文关系来定义样式
<body>
<p><strong>p标签:hello css</strong></p>
<ul>
<li><strong>li标签：hello css</strong></li>
</ul>
</body>
对应css文件：
li strong{
color:blue;
}
strong{
color:chartreuse;
}
3、CSS id选择器
Id选择器可以为标有id的html元素指定特有的样式，id选择器用“#”来定义
目前比较常用的方式是用id选择器来建立派生选择器
<body>
<a>普通的a标签</a>
<p id="pid">hello css<a href="www.jikexueyuan.com">pid中的a标签</a> </p>
</body>
对于的css文件：
#pid{
color:chartreuse;
}
#pid a{
color:brown;
}
4、类选择器
类选择器以一个点显示
class也可以用作派生选择器
<body>
<p class="pclass">class 类型</p>
<p class="pclass"><a>这是一个class 类型中的a标签</a></p>
</body>
对于的css文件：
.pclass{
color:red;
}
.pclass a{
color:blue;
}
5、属性选择器
对带有指定属性的Html元素设定样式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
[title]{
color:blue;
}
[title=te]{
color:rosybrown;
}
</style>
</head>
<body>
<p title="t">属性选择器</p>
<p title="te">属性和值选择器</p>
</body>
</html>
[CSS3] 学习笔记-CSS入门基本知识的更多相关文章
- [CSS3] 学习笔记-CSS动画特效
在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换 转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换, ...
- [CSS3] 学习笔记-CSS选择器
CSS3中,选择器的分类很多,有元素选择器.类选择器.ID选择器.属性选择器.后代选择器.子元素选择器.相邻兄弟选择器. 1.最常见的选择器就是元素选择器,文档的元素就是最基本的选择器,例如,h1{} ...
- [CSS3] 学习笔记-CSS定位
页面的设计需要通过摆放不同的模块在不同的位置,这个时候需要使用到定位和浮动的知识点,CSS3定位功能是很强大的,利用它你可以做出各种各样的网络布局. 1.CSS定位 1)定位机制 普通流:元素按照其在 ...
- [CSS3] 学习笔记--CSS盒子模型
1.CSS盒子模型概述 盒子模型的内容范围包括:margin(外边距).border(边框).padding(内边距).content(内容)部分组成. 2.内边距 内边距在content外,bord ...
- [CSS3]学习笔记-CSS基本样式讲解
1.CSS样式-背景 CSS运行应用纯色作背景,也允许使用背景图像创建相当复杂的效果 <!DOCTYPE html> <html> <head lang="en ...
- （3）《Head First HTML与CSS》学习笔记---CSS入门
1.O‘Reilly的<CSS PocketReference>是一本不错的CSS参考小书,记录了常用的元素属性. 2.元素选择器的作用强于继承的作用:用户定义强于浏览器默认(以下所有讨论 ...
- 前端学习笔记--CSS入门
1.css概述: 2.css语法: 3.css添加方法: 用单独的文件存储css样式的优点: 优先级: h3得到的样式是内嵌样式覆盖了外部样式. 4.css选择器 标签选择器: 类别选择器: ID选择 ...
- Redis学习笔记之入门基础知识——其他特性
1.订阅(subscribe)与发布(publish) 用户订阅某一个频道,频道发布新的信息时,会将信息告知用户 2.数据安全 1) 快照持久化(时间点转储,实质是数据副本) 操作:SAVA. ...
- Redis学习笔记之入门基础知识——五种数据类型
1) 字符串 SET设置值,GET获取值,DEL删除值 INCR key-name将键存储的值加上1 DECR key-name将键存储的值减去1 INCRBY key-name amou ...
随机推荐
- 类似java.lang.NoClassDefFoundError: org/jaxen/JaxenException解决方法
在使用dom4j的xpath时出现java.lang.NoClassDefFoundError: org/jaxen/JaxenException的异常,原因是dom4j引用了jaxen jar包,而 ...
- linux权限---【600，644，700，755，711，666，777】 - - 博客频道 - CSDN.NET
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- (简单) HUST 1017 Exact cover , DLX+精确覆盖。
Description There is an N*M matrix with only 0s and 1s, (1 <= N,M <= 1000). An exact cover is ...
- UVA 10689 Yet another Number Sequence
简单矩阵快速幂. if(m==1) MOD=10; if(m==2) MOD=100; if(m==3) MOD=1000; if(m==4) MOD=10000; 剩下的就是矩阵快速幂求斐波那契数列 ...
- Android SQLite总结[转载]
[转载] :http://blog.163.com/zqy216_2008/blog/static/4119371820119954812509/ 最近在做的项目涉及到了SQLite,大学时没有好好学 ...
- JAVA解析HTML，获取待定元素属性
Document doc = Jsoup.parseBodyFragment(previewHtml); //html内容解析为Document int index = 0; StringBuffer ...
- laravel database的事务函数
laravel的事务使用如下: DB::connection('gvideo')->transaction(function () use ($user_id, $video_id, $acti ...
- realm-java 源码疑问
JNIEXPORT void JNICALL Java_io_realm_internal_Group_nativeWriteToFile( JNIEnv* env, jobject, jlong n ...
- 关于ios 推送功能的终极解决
刚刚做了一个使用推送功能的应用 遇到了一些问题整的很郁闷 搞了两天总算是弄明白了 特此分享给大家 本帖 主要是针对产品发布版本的一些问题 综合了网上一些资料根据自己实践写的 不过测试也可以看看 首先要 ...
- iOS开发网络数据之AFNetworking使用 分类： ios技术 2015-04-03 16:35 105人阅读 评论(0) 收藏
http网络库是集XML解析,Json解析,网络图片下载,plist解析,数据流请求操作,上传,下载,缓存等网络众多功能于一身的强大的类库.最新版本支持session,xctool单元测试.网络获取数 ...