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. 创建可复用的自定义 ASP.NET MVC Helpers

    通常,在ASP.NET MVC项目中App_Code目录下新建.cshtml编写类似下方的代码就能创建自定义的MVC Helper了, 假设文件名为StrHelper.cshtml,那么在别的视图中的 ...

  2. 【OCP-12c】CUUG 071题库考试原题及答案解析（20）

    20.choose two Examine the description of the EMP_DETAILS table given below: Which two statements are ...

  3. ROS初次实践（小海龟）

    启动ROS Master 启动小海龟仿真器 启动海龟控制节点(方向键控制海龟运动) rqt_graph可视化工具 /rosout节点必须存在,订阅所有节点的日志信息. 当前系统当中存在的节点. 了解当 ...

  4. 《快学Scala》第三章 数组相关操作

  5. 菜鸟浅谈“诈骗”希望“治未病"

    关于目前诈骗.社工数据的套路,说道说道~ 一.前言 这篇文章没有什么高深的技术,只有普普通通的套路,主要也是有I春秋各位表哥与诈骗分子的交手有感而发! 二.正文 因为我们上网的或者其他条件下的人群,没 ...

  6. Python 魔法方法查询表 -- 总结篇

    据说,Python 的对象天生拥有一些神奇的方法,它们总被双下划线所包围,他们是面向对象的 Python 的一切. 他们是可以给你的类增加魔力的特殊方法,如果你的对象实现(重载)了这些方法中的某一个, ...

  7. day 13 课后作业

    # -*- coding: utf-8 -*-# @Time : 2019/1/7 18:00# @Author : Endless-cloud# @Site : # @File : day 13 课 ...

  8. STM32-RTC实时时钟-毫秒计时实现

    OS:Windows 64 Development kit:MDK5.14 IDE:UV4 MCU:STM32F103C8T6 1.RTC时钟简介 STM32 的实时时钟(RTC)是一个独立的定时器, ...

  9. 在Eclipse之中调试FastDFS-storage

    FDFS版本为5.03 1.首先在eclipse之中创建一个C/C++工程,取名为FastDFS_v5.03 2.将FastDFS源码解压后拷贝到新创建的工程目录下,然后在ecipse之中刷新下工程就 ...

  10. 如果你最近在考虑OCR的问题，请进来~~~

    本文主要是python方面各类ocr的api对比问题,至于app推荐几款:合合信息(扫面全能王),TextGrabber,白描等等等等 工作需要,搞文字识别技术,对比了几家 百度的OCR: #!/us ...