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标签。

 1  <style type="text/css">
 2         /*超链接取消下划线，改变颜色为红色*/
 3         a{ 4             text-decoration: none;
 5             color:red;
 6         }
 7         /*当鼠标移动到a上显示下划线，改变颜色为绿色*/
 8         a:hover{ 9             text-decoration: underline;
10             color:green;
11         }
12         /*给li标签改变内链模式*/
13         ul li{14             display: inline;
15         }
16     </style>

View Code

其中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;
}

　　

转载于:https://www.cnblogs.com/xiaowie/p/9693261.html

CSS级联样式表-css选择器相关推荐

  1. css级联样式表_CSS –级联样式表| 第1部分

    css级联样式表 CSS –级联样式表 (CSS – Cascading Style Sheets) CSS (Cascading Style Sheets) is a computer langua ...

  2. css级联样式表_CSS –级联样式表| 第三部分

    css级联样式表 CSS2雄心壮志 (CSS2 ambitions precipitated) To meet the first specification does not cover even ...

  3. HTML、CSS综合02——css，样式表，选择器、盒子模型

    回顾复习 什么是标签:标签由<tagName>开始,到</tagName>结束. xml的标签基本都是自定义的 html的标签,基本都是规定好的.(可以使用自定义标签)浏览器对 ...

  4. 级联样式表_级联样式表| 第1部分

    级联样式表 级联样式表(CSS) (Cascading Style Sheets (CSS)) CSS (Cascading Style Sheets) is a computer language ...

  5. css sheet2.0,详解CSS3.0(Cascading Style Sheet) 层叠级联样式表

    CSS3.0(Cascading Style Sheet) 层叠级联样式表 快速入门: CSS01 h1 { color: red; } 标题一 CSS的三种导入方式: 行内样式(优先级最高,但不建议 ...

  6. css样式表和选择器

    CSS样式----图文详解:css样式表和选择器 主要内容 CSS概述 CSS和HTML结合的三种方式: 行内样式表 . 内嵌样式表 . 外部样式表 CSS四种基本选择器: 标签选择器 . 类选择器 ...

  7. HTML笔记——④css样式表、选择器、常用属性

    HTML笔记--④css样式表.选择器.常用属性 一 CSS 1.1 CSS语法 1.2 CSS样式表 1.2.1 内部样式表 1.2.2 外部样式表 1.2.3 行内样式表 1.3 CSS常用属性 ...

  8. html链接外部css样式表,CSS外部样式表是什么？

    当Web浏览器加载网页时,它的显示方式取决于来自级联样式表的信息,HTML文件有三种使用样式表的方法:外部,内部和内联. 内部和内嵌样式表存储在HTML文件本身中.它们很容易在当下工作,但由于它们不是 ...

  9. react 组件添加样式_如何通过4个简单的步骤将CSS模块样式表添加到React组件

    react 组件添加样式 Let's say you'd like to add a CSS Modules Stylesheet to your project. You can find Crea ...

最新文章

  1. 使用Epoll 能监听普通文件吗？
  2. MPLS LDP随堂笔记1
  3. excel分段排序_EXCEL基础篇第六章(日期和时间的使用方法)
  4. HYSBZ 1010 玩具装箱toy （决策单调DP）
  5. 缓存之EHCache
  6. ffmpeg 时间戳
  7. 关于在Flask中使用Restful
  8. php qmqp 没有方法,CentOS7 php 安装 amqp扩展
  9. 利用dos进入mysql数据库操作数据
  10. Postman常用方法
  11. java中的diss可以做标识符吗_因为命名被diss无数次。简单聊聊编程最头疼的事情之一:命名...
  12. 微软8月补丁星期二值得关注的几个0day、几个严重漏洞及其它
  13. Excel数据的快速填充
  14. 医学CT图像三维重建代码
  15. 获取Linux系统的网卡ip地址
  16. Bugku-CTF之login3(SKCTF)（基于布尔的SQL盲注）
  17. 实话实说！猿如意大测评！助力coding！
  18. 昨天我请教了几位大佬，他们告诉我要这样学习编程！
  19. 绪论——信息理论学与量子信息学
  20. 单相逆变电路实战！（基于STM32F103C8T6的单相逆变电路，PID控制输出额定电压）

热门文章

  1. 系统地址和服务器地址不一致,在打开远程通服务配置程序时检测系统配置时提示配置失败，映射的ip地址与服务器不一致。...
  2. pytorch LSTM_regression
  3. TORCHVISION MODELS
  4. MySQL Window Function Descriptions
  5. Ansible Synopsis
  6. matplotlib color 参数
  7. C语言rand函数生成随机数详解和示例
  8. e0266 cout 不明确_荐书 | 不正义的时代，识别不正义的多重面孔
  9. 通过bginfo小工具让用户自己查看用户名与IP地址信息
  10. Windows Server 2012 R2 WSUS-5：组策略配置自动更新