CSS级联样式表-css选择器
CSS概念
Cascading Style sheet 级联样式表
表现HTMl或XHTML文件样式的计算机语言
包括对字体，颜色，边距，高度，宽度，背景图片，网页定位等设定
建议：把表示样式的代码从html中分离出来，并且创建一种规则来定义html标签要显示成什么样子。
选择器：
类型选择器：不带尖括号的标签名。 如给段落标签加下划线 p{text-decoration:underline;} 可以设置多个属性
派生选择器：作用在某些标签的子标签上。 如只给ul 中的li标签加20px的字号 ul li{ font-size:20px;}
伪类选择器：在原有选择器的基础上添加一个限定的条件，当某种情况发生时在选择这个标签。如给超链接加上鼠标悬浮改变红色 ，下划线 a:hover{ color:red; text-decoration:underline;}
:first-child:缩小标签的选择范围。如给ul中的第一个li标签加上红色 ul li:first-child{ color:red;} 只选择第一个li标签。
<style type="text/css">
/*超链接取消下划线，改变颜色为红色*/
a{
text-decoration: none;
color:red;
}
/*当鼠标移动到a上显示下划线，改变颜色为绿色*/
a:hover{
text-decoration: underline;
color:green;
}
/*给li标签改变内链模式*/
ul li{
display: inline;
}
</style>
其中a标签还有其他的伪类选择器：
a:link{ } 为访问的链接，和a{}相同并且同时存在时会覆盖a{}。
a:hover{} 鼠标移动到超链接上时。
a:active{},被选定的超链接。
a:visited{} 已访问的超链接。
类选择器：给HTMl标签增加一个class属性，然后给class属性填写一个值，这个值叫做类型。（在类名前面加“.”）
<body>
<ul class="shihua">
<li>中国需要你</li>
<li>美国需要你</li>
<li>世界需要你</li>
</ul>
<ul>
<li>世界美好</li>
<li>中国美好</li>
<li>美国美好</li>
<li>全都美好</li>
</ul> <!--这里我把上面的ul加上了类，下面的没加，这样使用使用类选择器的时候下面的ulstyle不会改变-->
.shihua{
text-decoration: none;
color: #FF0000; }
.shihua li{
display: inline;
}
CSS级联样式表-css选择器的更多相关文章
- 学习HTML 第三节.接近正题：HTML样式-CSS级联样式表
CSS (Cascading Style Sheets)级联样式表 内联样式 内联样式- 在HTML元素中使用"style" 属性 使用内联样式的方法是在相关的标签中使用样式属性. ...
- css 03-CSS样式表和选择器
03-CSS样式表和选择器 #本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS几 ...
- CSS篇-样式表、选择器、权重、伪类
CSS定义 CSS:Cascading Style Sheet(层叠样式表) // 写法 选择器 { 属性名: 属性值; } CSS样式表 (1)三种样式表使用 // 内联样式 <div sty ...
- css样式表和选择器的优先级以及position元素属性值的区别
css样式表优先级 问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢? 答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权. 1.浏览器缺省 ...
- 【WordPress】外网访问WordPress时无法加载样式表CSS
情况: 阿里云ECS服务器,用WampServer搭建的WordPress站点,服务端自身访问该站点时显示正常,但外网访问时不能加载样式表CSS的问题. 重要的参考: https://www.doub ...
- Day5 CSS基本样式和C3选择器
Day5 CSS基本样式和C3选择器 一.背景属性 1.背景颜色 background-color:transparent(默认值,透明); 颜色的取值: ...
- CSS样式表及选择器相关内容(一)
CSS(Cascading Style Sheets)层叠样式表1.CSS级联-CSS层叠:规定在哪个HTML中使用哪个样式. body{ font-size:16px; //body默认字体大小 } ...
- CSS：CSS样式表及选择器优先级总结
我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...
- CSS样式----图文详解：css样式表和选择器
主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...
随机推荐
- phonegap3.0+HTMLl5 开发 ipad app 总结
忙碌了一段时间,终于完成了手上的这个ipad上的app ,app是用phonegap+ jquery mobile 开发的,不是用原生的objective c开发的.因为app有许多chart的渲染, ...
- FFMPEG 的学习
https://blog.csdn.net/leixiaohua1020/article/details/15811977/
- 关于Collections的操作方法
Collections是一个包装类,其中包含有各种有关集合操作的静态多态方,比如可以作用在List和Set上,此类不能实例化. 排序 Integer[] array = new Integer[]{3 ...
- Using RDP to connect Windows remote desktop with Linux
安装rdesktop(一般情况下不需要这么做): sudo apt-get install rdesktop 执行连接: rdesktop xxx.xxx.xxx.xxx:3389 -u admini ...
- [Swift实际操作]七、常见概念-(13)使用UIScreen查询设备屏幕信息
本文将为你演示,如何获得设备的屏幕信息,了解设备的屏幕尺寸等信息,才能做出适配性更好的应用程序. 首先导入需要使用到的界面工具框架 import UIKit 然后通过UIScreen类,就可以获得设备 ...
- 高性能缓存服务器Varnish
一.Varnish概述 Varnish是一款高性能的.开源的反向代理服务器和缓存服务器,计算机系统的除了有内存外,还有CPU的L1.L2,甚至L3级别的缓存,Varnish的设计架构就是利用操作系统的 ...
- javaweb Servlet接收Android请求，并返回json数据
1.实现功能 (1)接收http请求 (2)获取Android客户端发送的参数对应的内容 (3)hibernate查询数据库 (4)返回json数据 2.java代码 import EntityCla ...
- PHP反序列化漏洞新攻击面(BlackHat 2018)
0x00 前言 入职以来好久没有写过文章了,入职的时间里也和师傅们学到了很多,认识了很多的新朋友.最近因为BlackHat 黑客大会的一个议题,PHP反序列化漏洞利用被挖掘出新的攻击面.这里本着记 ...
- OpenERP中自定义模块卸载失败，Postgres数据库删不掉数据库，OpenERP登录不了一直在加载的问题解决方案。
解决方案也就是删除掉不用的数据库,OE会提示当前有N个Session不让Drop数据库. 对于Postgres 9.1 版本,在pgAdmin中查询以下语句: SELECT pg_terminate_ ...
- WCF系列教程之WCF实例化
本文参考自http://www.cnblogs.com/wangweimutou/p/4517951.html,纯属读书笔记,加深记忆 一.理解WCF实例化机制 1.WCF实例化,是指对用户定义的服务 ...