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. “全栈2019”Java异常第八章：throw关键字详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...

  2. python redis 方法大全

    redis连接 1,安装redis pip install redis 实例: import redis from datetime import datetime r = redis.Redis(h ...

  3. ZJOI2019 游记

    Day -2 入住酒店,跟 Sooke 一个房间 酒店还是很好的呢 然后就是颓废 Sooke 和 zxy,ljx,lyt,xx 一起打 lol,我孤独的打着坦克和 MC 然后复习了一下板子 Day - ...

  4. AngularJS入门讲解3：$http服务和路由讲解

    上一课的例子中,我们的模型数据是硬编码的,也就是说,我们的数据不是从服务器请求回来的. 这里,我们先讲解,如何从服务器获取数据: function PhoneListCtrl($scope, $htt ...

  5. [Objective-C语言教程]Posing（29）

    Posing,顾名思义,意思是“冒充”,它跟categories类似,但本质上不一样,Posing存在的目的在于子类可以冒充父类,使得后续的代码无需把父类修改为子类,就可以很方便的让父类表现成子类的行 ...

  6. 写给移动开发者的 React Native 指南

    本文原创版权归 简书 wingjay 所有,如有转载,请于文章篇头位置显示标注原创作者及出处,以示尊重! 作者:wingjay 出处:http://www.jianshu.com/p/b8894425 ...

  7. JavaScript创建对象的4种方法

    我们有很多种方式去构造一个对象.可以构造一个对象字面量,也可以和new前缀连用去调用一个构造器函数,或者可以使用Object.create方法去构造一个已经存在的对象的新实例,还可以调用任意一个会返回 ...

  8. Eclipse中创建SpringBoot项目流程，及报错解决方案

    1.下载最新的Eclipse(老版本的有可能不包含springBoot插件),然后在help中打开Eclipse MarketPlace,在Spring Marketplace 中搜索SpringBo ...

  9. QuantLib 金融计算——基本组件之 Date 类

    目录 QuantLib 金融计算--基本组件之 Date 类 Date 对象的构造 一些常用的成员函数 一些常用的静态函数 为估值计算配置日期 如果未做特别说明,文中的程序都是 Python3 代码. ...

  10. Machine learning 第5周编程作业

    1.Sigmoid Gradient function g = sigmoidGradient(z) %SIGMOIDGRADIENT returns the gradient of the sigm ...