CSS基础-引入方法,选择器,继承
一.CSS引入方法:行内式、嵌入式、导入式、链接式。
1、行内式。
即:在标签的style属性中设定CSS样式。
例子:<div style="行内式</div>
2、嵌入式
即:将页面各种元素的设置集中写在<head></head>标签里。
例子:
<head>
<style type="text/css">
div{ }
</style>
</head>
3、导入式
即:将一个外部CSS文件引入CSS文件或HTML文件,注意此方法既能在CSS文件里使用也能够在HTML的<head></head>标签之间使用。
<head>
<style type="text/css">
@import "main.css";
</style>
</head>
4、链接式
即:将一个外部CSS文件引入HTML文件
例子:
<head>
<link href="main.css" rel="stylesheet" tyle="text/css">
</head>
二、选择器
1、ID选择器
根据HTML元素的id属性选择元素。
例子:
CSS: #div1{ } /* 选中id为div1的HTML元素 */
HTML: <div id="div1">我是ID为div1的div元素</div>
2、class选择器
根据HTML的class属性选择元素。
例子:
CSS: .left{ font-size: 13px; line-height: 19px; orphans: 2; widows: 2;"> HTML <div class="left">我是class="left"的div元素</div>
3、标签选择器
根据HTML标签选择元素
例子:
CSS: div{ }
HTML: <div>我是一个div元素</div>
4、复合选择器
4.1 交集选择器
例子:
CSS: p.special{ color:red; } /* 选中class="special"的p元素 */
HTML:
<p>我是一个p</p> /* 不会被选中 */
<p class="special">我是一个class="special"的元素</p> /* 选中该行 */
4.2 并集选择器
例子:
CSS: .special,div,p { }
HTML:
<span class="special">我是一个class属性为span的元素</span>
<div>我是一个div元素</div>
<p>我是一个p元素</p>
以上三行HTML代码都会被选中。
4.3 后代选择器
后代选择器:选中所有后代元素
例子:
CSS: .special p{ }
HTML:
<div class="special">
<p>我是.special里的p元素</p> /* 会被选中 */
<div>
<p>我是.special里的p元素</p> /* 会被选中 */
</div>
</div>
<p>我也是一个p</p> /* 不会被选中 */
直接后代选择器
即:选择直接子后代
CSS: .special>p{ }
<div class="special">
<p>我是.special里的p元素</p> /* 会被选中 */
<div>
<p>我是.special里的p元素</p> /* 不会被选中,因为不是直接子元素,是孙子元素了 */
</div>
</div>
<p>我也是一个p</p> /* 不会被选中,非子元素 */
五、属性选择器
CSS: a[title]{ font-size:30px; } //选中含有title属性的a元素
<a title="a1" href="/">我是第一个a标签</a> //会被选中,含有title属性
<a href="/">我是第二个a标签</a> //不会被选中,没有title属性
a[title="a1"]{ font-size:30px; } //选中title属性=a1的元素
<a title="a1" href="/">我是第一个a标签</a> //会被选中,含有title,并且title=a1
<a href="/">我是第二个a标签</a> //不会被选中,没有title属性
<a title="a2" href="/">我是第一个a标签</a> //不会被选中,title不=a1
其他属性符号:a[title~='a1'] 选中<a title="a1 important"></a> 选中title属性中包含a1的元素,注意a与其他值要有空格
a[title^='a1'] 选中<a title="a1bcd"></a> 选中title属性以a1开头的元素
a[title$='a1'] 选中<a title="bcda1"></a> 选中title属性以a1结束的元素
a[title*='a1'] 选中<a title="xxa1xx"> 选中title属性中包含a1的元素
a[title|='a1'] 选中<a title="a1-bcd"></a>或<a title="a1"></a> 选中title属性中包含"a1-"开头或等于"a1"的元素,常用于选择src="logo-1","logo-2"等属性。
六、相邻兄弟选择器"+"
CSS: span + p
HTML:
<div>
<span>我是一个span</span>
<p>我是一个p</p> <!--会被选中-->
<div>
<p>我也是一个P</p> <!--不会被选中。不是span的兄弟-->
</div>
</div>
六、CSS的继承特性
子元素会继承父元素中的样式
CSS: p{ color:red; text-decoration:underline; }
b{ color:blue; }
HTML: <p>我是<b>p</b>元素</p> 显示结果为:我是p元素
可以看到b继承了下划线样式,同时改变了颜色。(注:下划线仍然是红色) 这样就可以实现CSS样式的共用。
六、CSS层叠特性
各个选择器优先级排行:
行内样式>ID选择器>class选择器>标签选择器
当连个选择器优先级相同时,写在前面>写在后面。如:<p class="p1 p2">此时p1样式优先</p>
七、伪类
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
p:first-child {font-weight: bold;}
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时,向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。
:lang 向带有指定 lang 属性的元素添加样式。
八、伪元素
:first-letter 向文本的第一个字母添加特殊样式。
:first-line 向文本的首行添加特殊样式。 此伪类只能用于块级元素。
:before 在元素之前添加内容。
:after 在元素之后添加内容。
CSS基础-引入方法,选择器,继承的更多相关文章
- 【css学习整理】css基础(样式,语法,选择器)
CSS是什么? cascading 层叠样式表 sheet 样式文件 style 外观个性化 CSS语法? 声明方法: 选择器(属性: 值; 属性: 值) 选择器: 通过名称制定对哪些标签进行样式设置 ...
- CSS的引入与选择器
CSS的引入与选择器 CSS与HTML的关系 Cascading Style Sheet 即层叠样式表 在上一篇文中,已经介绍了一些非常常用的HTML标签,接下来将步入CSS的学习,如果将单纯HTML ...
- HTML&CSS基础-伪元素选择器
HTML&CSS基础-伪元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...
- HTML&CSS基础-伪类选择器
HTML&CSS基础-伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...
- CSS 基础知识点 样式 选择器 伪类
CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...
- CSS基础语法与选择器
CSS基础 语法 : <head> <style type="text/css"> 选择器(即修饰对象){ 修饰属性:属性值; 修饰属性:属性值; } &l ...
- css的引入方法2
id 方法精确 #div1 { font-size:30px; } <!DOCTYPE html> <html> <head> <meta name=&q ...
- 前端学习——css基础知识,选择器与html模板、值得收藏的html标签
一.css需要的html(采用html5标准) DTD,文档类型声明: <!Doctype html> 文本编码声明: <meta charset="utf-8" ...
- css的引入方法
1.外部途径: 建立xx.css文件与html文件放在同一目录下 加入 <link rel="stylesheet" type="text/css" hr ...
随机推荐
- 用continue语句的时候,要千万小心内存泄漏,当然还有return和break也是
疑惑了大半年的内存泄漏,居然是因为这个原因- 有空学学QT的指针使用,可以使得代码更简洁.更不容易内存泄漏-
- 《Programming WPF》翻译 第9章 6.我们进行到哪里了?
原文:<Programming WPF>翻译 第9章 6.我们进行到哪里了? 只有当任何内嵌控件都没有提供你需要的底层行为时,你将要写一个自定义控件.当你写一个自定义控件,你将要使用到依赖 ...
- 2015第14周日WebSocket
清明时节雨纷纷,路上行人欲断魂,借问酒家何处是?牧童遥指杏花村.每次清明都不禁想起杜牧这首诗缅怀先人,此时第一句写时间天气,第二句写人物心情,第三句写解决方法,第四句给出解决方案,脍炙人口. 刚没事看 ...
- [转]jQuery EasyUI 扩展-- 主题(Themes)
主题(Themes)允许您改变站点的外观和感观.使用主题可以节省设计的时间,让您腾出更多的时间进行开发.您也可以创建一个已有主题的子主题. 主题生成器(Theme Builder) jQuery UI ...
- web文档类型DOCTYPE html很重要
之前写html或者jsp页面,从来不注意DOCTYPE 的声明,也不太明白DOCTYPE 的作用.直到最近碰到了一个非常奇葩的bug:某一个页面在IE7和8,Chrome,ff等下正常,但是在IE9下 ...
- jQuery Pagination Ajax分页插件中文详解(摘)
jQuery Pagination Ajax分页插件中文详解 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxin ...
- C. Robot(BFS)
C. Robot Time Limit: 3000ms Case Time Limit: 3000ms Memory Limit: 262144KB 64-bit integer IO format: ...
- NET中级课--文件,流,序列化2
1.流的类型体系: 基础流 装饰器流 包装器类 帮助类 2. stream file~ memory~ network~ stream是个 ...
- Android 4.4前后版本读取图库图片和拍照完美解决方案
转载:http://blog.csdn.net/zbjdsbj/article/details/42387551 4.3或以下,选了图片之后,根据Uri来做处理,很多帖子都有了,我就不详细说了. 主要 ...
- html基本基础
一 HTML5是用来做什么的? PSD2HTML 信息 信息差(信息不对称) 二 html文件新建流程: 新建文本文件 网页文件后缀 .html 修改编码:ANSI格式,UTF-8无BOM格式==== ...