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. Let it crash philosophy for distributed systems

    This past weekend I read Joe Armstrong’s paper on the history of Erlang. Now, HOPL papers in general ...

  2. API Test Postman接口测试之高级篇2

    API Test  Postman接口测试之高级篇2 一.继承父类的设置: 二.导出及导入: 三.分享文档: 四.发布接口文档: 五.常用脚本: 右边框选的是一些常用的脚本,postman提供的,可以 ...

  3. spring的父子上下文容器及配置

    本文由作者张远道授权网易云社区发布. spring父子容器 spring总的上下文容器有父子之分.父容器和子容器.父容器对子容器可见,子容器对父容器不可见. 对于传统的spring mvc来说,spr ...

  4. http与https通信

    HTTP协议 http协议与https协议的区别 GET请求和POST请求的说明与比较 发送GET和POST请求(使用NSURLSession)

  5. 【Oracle 12c】CUUG OCP认证071考试原题解析（32）

    32.choose the best answer View the Exhibit and examine the data in EMP and DEPT tables. In the DEPT ...

  6. layui select 禁止点击

    $('select').attr('disabled', 'disabled'); form.render('select'); 注意事项: 1. 必须写 layui.use([form]) 2. 先 ...

  7. Spring-JDBDTamplate 的操作

    基本的    增,删,改:(只演示增加 因为他们调用的方法都是update方法): package com.hxzy.spring_jdbc_template; import org.springfr ...

  8. 洛谷P3676 小清新数据结构题（动态点分治+树链剖分）

    传送门 感觉这题做下来心态有点崩……$RMQ$求$LCA$没有树剖快我可以理解为是常数太大……然而我明明用了自以为不会退化的点分然而为什么比会退化的点分跑得反而更慢啊啊啊啊~~~ 先膜一波zsy大佬 ...

  9. robot framework学习笔记之十-模板

    测试模板可以让关键字驱动测试用例转换为数据驱动测试用例.鉴于普通测试用例是由关键字和可能的参 数组成,使用了模板的测试用例只需要定义模板关键字的参数即可

  10. Python 各种编码相互转化 （目前只有Unicode utf-8）

    f='\u53eb\u6211' print f print(f.decode('unicode-escape'))