CSS 入门基础
一、CSS 介绍什么是CSS
CSS 指的是层叠样式表（Cascading StyleSheet）。在网页制作时采用层叠样式表技术，
可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
CSS 的基础语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
h1{
color:red;
font-size:14px;
}
属性大于 1 个之后，属性之间用分号隔开。这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
css 高级语法
1.选择器的分组
h1，h2，h3，h4，h5，h6{
color：red;
}
2.继承
根据 CSS，子元素从父元素继承属性
body{
color：green;
}
通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。
派生选择器
派生选择器 通过依据元素在其位置的上下文关系来定义样式，可以使标记更加简洁。
比方说，你希望列表中的 strong 元素变为红色，而不是通常的黑色，可以这样定义一个派生选择器：
li strong{
color: red;
}
<p><strong>我是黑色，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<u1>
<li><strong>我是红色。这是因为 strong 元素位于 li 元素内。</li>
</u1>
id 选择器
1.id 选择器： id 选择器可以为标有 id 的 HTML 元素指定特定的样式 id 选择器以“#”来定义
2.id 选择器和派生选择器： 目前比较常用的方式是 id 选择器常常用于建立派生选择器
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="MyCss.css" type="text/css" rel="stylesheet">
</head>
<body>
<p id="pid">hello css<a href="www.shiyanlou.com">shiyanlou</a></p>
<div id="divid">this is a div</div> </body>
</html>
#pid a{
color:#00755f;
}
#divid {
color: red;
MyCss.cs文件
类选择器
(1)在 CSS 中，类选择器以一个点号显示
.divclass {
color: red;
}
下面的 html 代码中，div 元素含有 divclass 类，意味着它要遵守.divclass的规则。
<div class="divclass">
hello div
</div>
(2)和 id 一样，class 也可被用作派生选择器：
.pclass a{
color: green;
属性选择器
对带有指定属性的 HTML 元素设置样式。
(1)下面的例子为带有 title 属性的所有元素设置样式：
<style>
[title] {color:red;}
</style>
属性和值选择器
<style>
[title=te]{
color: red;
}
</style>
CSS 入门基础的更多相关文章
- 第六十九节，css入门基础
css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...
- CSS入门基础学习二
我们下午继续学习CSS的入门基础,搬上你的小板凳赶快进入吧! 一.背景(background) Background-color:背景颜色 background-image (背景图片) backgr ...
- 【CSS入门基础，有需要的看过来哦】心境，心静，不轻言放弃！---致CSS
整理一下近一周学习的有关CSS的基础知识笔记: CSS语法必须写在<style>标签中哦~/*注释*/ [CSS常用背景属性]background background-color:背景色 ...
- 学起来 —— CSS 入门基础
Hello,大家好! 小女来更博啦!CSS福利送上~~~ 首先给大家介绍一下CSS到底是什么? 一.CSS概念 W3C规范中,要求有三条:一 为"两个分离",二 为语言遵循语义化, ...
- CSS入门基础
认识CSS 传统HTML设计网页版面的缺点 CSS的特点 CSS的排版样式 13.1 认识CSS CSS的英文全名是Cascading Style Sheets,中文可翻译为串接式排版样式,并且CSS ...
- css入门基础知识
一.CSS常用选择器 /*CSS注释*/ /*CSS修改页面中的所有标签必须借助选择器选中. 选择器中可以写多对CSS属性:每个属性名与属性值之间用:分隔,多对属性之间,必须用;分隔 选择器{ 属性1 ...
- 13 ，CSS 入门基础,行内排版内嵌式排版和外部排版样式
1.认识 CSS 2.传统 HTML 设计网页版面的缺点 3.CSS 的特点 4.CSS 的排版样式 13.1 认识CSS CSS的英文全名是 Cascading Style Sheets,中文可翻译 ...
- HTML中CSS入门基础
HTML.CSS 实用css有三种格式:内嵌:内联:外部: 分类:内联:写在标记的属性位置,优先级最高,重用性最差内嵌:写在页面的head中,优先级第二,重用性一般外部:写在一个以css结尾的文件中, ...
- CSS入门基础学习一
一.CSS样式 1.什么是CSS: CSS是指层叠样式表(Cascading Style Sheels),CSS通常为CSS样式表或层叠样式表,主要用于设置HTML文本内容,以及版本面的布局等 2.H ...
随机推荐
- LeetCode315—Count of Smaller Numbers After Self—Java版归并算法
这是我在研究leetcode的solution第一个解决算法时,自己做出的理解,并且为了大家能看懂,做出了详细的注释. 此算法算是剑指Offer36的升级版,都使用的归并算法,但是此处的算法,难度更高 ...
- SQL优化工具
SQL优化工具 什么是索引? 打个比方,我们在使用MySQL用作查询的时候就好比查字典,索引就好比字典的偏旁部首页.如果没有索引我们查询一个文字就需要一页页的翻,显然这种方式效率很低.如果我们对某一字 ...
- Java内存溢出分析方法(Eclipse Memory Analyzer 使用简单入门)
转载至:http://outofmemory.cn/java/jvm/OutOfMemoryError-analysis 工具 安装Memory Analyse Tools(MAT) 工具, 可以直接 ...
- spring配置和注解事务同时存在导致的事务嵌套
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt123 首先先看配置文件: [html] view plaincopy < ...
- 开始学习.net的第二天
今天由于原因上午没上课.下午去了学的.net的表格. <body></body><img src="../temp/新建文件夹/64aab4ae3e632dbc ...
- poj2914无向图的最小割模板
题意:给出无向图的点,边,权值.求最小割. 思路:根据题目规模,最大流算法会超时. 网上参考的模板代码. 代码: /*最小割集◎Stoer-Wagner算法:一个无向连通网络,去掉一个边集可以使其变成 ...
- 使用imageLoader加载图片资源
- NHibernate教程(14)--使用视图
本节内容 引入 1.持久化类 2.映射文件 3.测试 结语 引入 在数据库操作中,我们除了对表操作,还有视图.存储过程等操作,这一篇和下篇来学习这些内容.这篇我们来学习如何在NHibernate中使用 ...
- 集美大学网络1413第十三次作业成绩（团队八） -- 第二次项目冲刺（Beta阶段）
题目: 团队作业8--第二次项目冲刺(Beta阶段) 团队作业8-成绩: 团队/分值 新加入成员 角色 技术特点 改善的功能. 原因. bug 新增功能. 方法. 如何实现 团队分工改进. 原因 改 ...
- 团队作业8——第二次项目冲刺（Beta阶段）Day6——5.25
1.提供当天会议照片: 2.会议的内容: (1)讨论已经完成的功能,讨论存在的问题 (2)对于界面,谈谈各自的看法 (3)讨论接下来的任务和改进的地方 3.工作安排: 队员 今日任务 明日任务 贡献比 ...