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选择器的更多相关文章

  1. 学习HTML 第三节.接近正题:HTML样式-CSS级联样式表

    CSS (Cascading Style Sheets)级联样式表 内联样式 内联样式- 在HTML元素中使用"style" 属性 使用内联样式的方法是在相关的标签中使用样式属性. ...

  2. css 03-CSS样式表和选择器

    03-CSS样式表和选择器 #本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS几 ...

  3. CSS篇-样式表、选择器、权重、伪类

    CSS定义 CSS:Cascading Style Sheet(层叠样式表) // 写法 选择器 { 属性名: 属性值; } CSS样式表 (1)三种样式表使用 // 内联样式 <div sty ...

  4. css样式表和选择器的优先级以及position元素属性值的区别

    css样式表优先级 问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢? 答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权. 1.浏览器缺省 ...

  5. 【WordPress】外网访问WordPress时无法加载样式表CSS

    情况: 阿里云ECS服务器,用WampServer搭建的WordPress站点,服务端自身访问该站点时显示正常,但外网访问时不能加载样式表CSS的问题. 重要的参考: https://www.doub ...

  6. Day5 CSS基本样式和C3选择器

    Day5 CSS基本样式和C3选择器 一.背景属性 1.背景颜色            background-color:transparent(默认值,透明); 颜色的取值:            ...

  7. CSS样式表及选择器相关内容(一)

    CSS(Cascading Style Sheets)层叠样式表1.CSS级联-CSS层叠:规定在哪个HTML中使用哪个样式. body{ font-size:16px; //body默认字体大小 } ...

  8. CSS:CSS样式表及选择器优先级总结

    我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...

  9. CSS样式----图文详解:css样式表和选择器

    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...

随机推荐

  1. 用MVC5+EF6+WebApi 做一个小功能(三) 项目搭建

    一般一个项目开始之前都会有启动会,需求交底等等,其中会有一个环节,大讲特讲项目的意义,然后取一个高大上的项目名字,咱这是一个小功能谈不上项目,但是名字不能太小气了.好吧,就叫Trump吧.没有任何含义 ...

  2. 201621123023《Java程序设计》第11周学习总结

    一.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 二.书面作业 本次PTA作业题集多线程 1. 源代码阅读:多线程程序BounceThread 1.1 BallRun ...

  3. ESXi到KVM之v2v迁移

    1.ESXi到KVM之v2v情况说明 (1).配置任务列表: 1)VMwareESXi虚拟平台下linux系统迁移到KVM虚拟平台.2)VMwareESXi虚拟平台下windows系统迁移到KVM虚拟 ...

  4. forword和重定向有什么区别?

    一.forword 1.请求只能从同一个web中转发,当前应用之外的找不到. 2.地址栏不变. 3.共享request对象,请求链不断. 4.永久性跳转,最常用. 5.客户端方法功能跳转 二.重定向 ...

  5. flask后端获取前端post/get数据

    post:用request.form 而且要加上return !!记着加上return get:用 request.args()就可以了

  6. 某种带权有向无环图(graph)的所有路径的求法

    // 讨论QQ群:135202158 最近做某个东西,最后用图实现了,这里总结一下算法. 假设有以下带权有向无环图(连通或非连通,我这里用的是非连通的): 每个节点(node)可能与其他节点有向地相连 ...

  7. nginx配置文件中,location字段里面的root字段和别名alias

    1. location里面的root例子 server{ listen ; server_name www.wzw.com; location /www { root /data/; //设置虚拟主机 ...

  8. Git从码云或者Github 克隆代码到本地

    Git从码云或者Github 克隆代码到本地 1.下载安装Git,傻瓜式下一步下一步即可... 2.配置Git: 2.1.选择你要clone到本地的路径:右键--->$ Git Bash Her ...

  9. set,env和export命令显示shell变量其区别,与环境变量扫盲(一)

    种类: ♦ set     :  用来显示本地变量,显示当前shell的变量,包括当前用户的变量 ♦ env    :  用来显示环境变量,显示当前用户的变量. ♦ export:  用来显示和设置环 ...

  10. trunc 函数用法

    转载至:http://blog.csdn.net/aqszhuaihuai/article/details/6303686 1.trunc用于日期,可精确到年,月和日. select trunc(sy ...