CSS(Cascading Style Sheet)称为层叠样式表，也可以称为CSS样式表或样式表，其文件扩展名为.css，
CSS是用于增强或控制网页样式，并允许将样式信息与网页内容分离的一种标记性语言。
引用样式表的目的是将“网页结构代码”和“网页样式风格代码”分离开，对网页布局进行更多的控制。

CSS基础语法
CSS样式表由若干条样式规则组成，每条样式规则由三部分构成：
选择符(selector)、属性(property)和属性值(value),
基本格式如下：
selector{property: value;}

CSS样式表控制HTML5页面效果的方式通常包括行内样式、内嵌样式、链接样式和导入样式。
链接样式：
<link rel="stylesheet" type="text/css" href="1.css" />
（1）rel表示链接到样式表，值为stylesheet
（2）type表示样式表类型为CSS样式表
（3）href指定了CSS样式表文件的路径，此处表示当前路径下名称为1.css文件。此路径根据不同情况使用绝对路径和相对路径两种。
导入样式：
导入外部样式表是指在内嵌样式表的<style>标记中，使用@import导入一个外部的CSS文件，如：
<head>
    <style type="text/css">
    @import "1.css"
    </style>
</head>

优先级：
CSS样式表方式的优先级顺序由大到小依次是：行内样式、内嵌样式、链接样式、导入样式。

CSS选择器（选择符selector）
根据CSS选择器用途可以把选择器分为标记选择器、类选择器、全局选择器、ID选择器和伪类选择器等。
全局选择器
如果想要一个页面中所有HTML标记使用同一种样式，可以使用全局选择器，语法格式：
*{property: value;}
伪类
a:link         /*未访问的链接*/
a:visited      /*已访问的链接*/
a:hover        /*鼠标移动到链接上*/
a:active       /*选定的链接*/

结构伪类选择器
选择器                   含义

E:root                  匹配文档的根元素，对于HTML文档，就是HTML元素

E:nth-child(n)          匹配其父元素的第n个子元素，第一个编号为1

E:nth-last-child(n)     匹配其父元素的倒数第n个子元素，第一个编号为1

E:nth-of-type(n)        与:nth-children()作用类似，但是仅匹配使用同种标签的元素

E:nth-last-of-type(n)   与:nth-last-child()作用类似，但是仅匹配使用同种标签的元素

E:last-child            匹配父元素的最后一个子元素，等同于:nth-last-child(1)

E:first-of-type         匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)

E:last-of-type          匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-type(1)

E:only-child            匹配父元素下仅有的一个子元素，等同于:first-child:last-child 或:nth-child(1):nth-last-child(1)

E:only-of-type          匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type 或:nth-of-type(1):nth-last-of-type(1)

E:empty                 匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素
实例：
<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>结构伪类</title>

    <style>

        tr:nth-child(even){

            background-color: #f5fafe;

        }

        tr:last-child{

            font-size: 25px;

        }

        li:nth-child(3){

            color: red;

        }

    </style>

</head>

<body>

<table border="1" width="15%">

    <th>姓名</th><th>编号</th><th>性别</th>

    <tr><td>刘海松</td><td>006</td><td>男</td></tr>

    <tr><td>王峰</td><td>001</td><td>女</td></tr>

    <tr><td>李章立</td><td>006</td><td>男</td></tr>

    <tr><td>刘海松</td><td>006</td><td>男</td></tr>

</table>

<ul>

    <li>蔬菜</li>

    <li>水果</li>

    <li>鲜花</li>

    <li>饮料</li>

</ul>

</body>

</html>

UI元素状态伪类选择器
网页中，UI元素一般是指包含在form元素内的表单元素。
常用的状态伪类选择器
选择器          说明
E:enabled      选择匹配E的所有可用UI元素，匹配<input type="text">

E:disabled     选择匹配E的所有不可用UI元素,匹配<input type="button" disabled="disabled">

E:checked      选择匹配E的所有可用UI元素,匹配<input type="checkbox" checked="checked">
实例：
<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style>

        input:enabled{

            border: 1px dotted #666; background: #ff9900;

        }

        input:disabled{

            border: 1px dotted #999; background: #f2f2f2;

        }

    </style>

</head>

<body>

<div style="text-align: center">

    <h3>Login</h3>

    <form method="post" action="">

        <p>username: <input type="text" name="username"></p>

        <p>password: <input type="password" name="passwd" disabled="disabled"></p>

        <p>

            <input type="submit" value="submit">

            <input type="reset" value="reset">

        </p>

    </form>

</div>

</body>

</html>

												


											
Study 5 —— CSS概述的更多相关文章
	

    
								
  1. xhtml和css概述
		
    Xhtml和css概述 1.html的过渡到xhtml html与xhtml不是两种语言,它们是一种语言的不同阶段,有点类似于文言文和白话文之间的关系.因为网络技术的日新月异,html的不断改进,所以 ...
    
		
    2. 
						
  2. 一、CSS概述 	二、CSS的选择器（认识） 	三、CSS样式和属性（练习） 	四、重构商城首页DIV+CSS(页面布局)（重点） 浮动/更改显示方式
		
    一.CSS概述###<1>概念 DIV,就是一个HTML元素,块级元素,通常结合CSS进行页面的布局. CSS,层叠样式表,给HTML元素增强显示. ###<2>作用 样式定义 ...
    
		
    3. 
						
  3. Unit02： CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明
		
    Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html&g ...
    
		
    4. 
						
  4. Web前端：1、HTML&CSS概述及结构
		
    万维网联盟(World Wide Web Consortium)简称W3C,专门为了定义网页相关的标准而成立,如网页中的HTML.CSS.DOM.HTTP.XML等标准. 根据W3C标准,一个网页主要 ...
    
		
    5. 
						
  5. CSS概述<选择器总结>
		
    概述:CSS是指层叠样式表,他是定义如何显示HTML元素,样式表通常存储在样式表中,通常存储在.css文件中,下面对css的选择器进行总结,便大家夯实基础! 1 语法规范: 每个样式规则有两个部分:选 ...
    
		
    6. 
						
  6. python css概述
		
    1. 概述 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style ...
    
		
    7. 
						
  7. 后端码农谈前端（CSS篇）第一课：CSS概述
		
    一.从扮演浏览器开始 扮演浏览器是Head First图书中很有意义的一个环节.可作者忘记了告诉我们扮演浏览器的台本.我们从这里开始. 上图是webkit内核渲染html和css的流程图.从该图我们可 ...
    
		
    8. 
						
  8. css概述
		
    前言 1.CSS    cascading   stylesheet  级联样式表 ,外观显示(页面内容显示的方式).CSS文档以.css作为后缀    2.w3c推荐页面文件定义      数据和结 ...
    
		
    9. 
						
  9. 网页三剑客：HTML+CSS+JavaScript 之CSS概述
		
    CSS 简介 什么是 CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. MYSQL CASCADE DELETE 引发的思考
			
    MYSQL CASCADE DELETE :级联删除.这个概念还是学习Oracle时得到的. 就是主键记录删除时,相关的有外键的表里的记录,也删除. https://dev.mysql.com/doc ...
    
			
    2. 
						
  2. Javascript中实现继承的方式
			
    js中实现继承和传统的面向对象语言中有所不同:传统的面向对象语言的继承由类来实现,而在js中,是通过构造原型来实现的,原型与如下几个术语有关: ①构造函数:在构造函数内部拥有一个prototype属性 ...
    
			
    3. 
						
  3. [区块链]POW 与POS
			
    POW:全称Proof ofWork,工作证明. 这是什么意思呢?就是说,你能获得多少货币,取决于你挖矿贡献的有效工作,也就是说,你电脑性能越好,分给你的矿就会越多,这就是根据你的工作证明来执行货币的 ...
    
			
    4. 
						
  4. Linux初学笔记---关于进程管理等
			
    菜鸟初学: 1. 查看进程用的命令: ps 具体用法 ps -A ro ps -e 显示所有进程 ps -u root 显示root 用户的进程 ps -u root -N 显示非root用户的进程  ...
    
			
    5. 
						
  5. hive数据导入load导入命令
			
    LOCAL  指的是操作系统的文件路径,否则默认为HDFS的文件路径 1.向t2和t3的数据表中导入数据 2.导入操作系统的一下三个文件 执行导入命令 3.将HDFS文件中的数据导入到t3中 4.导入 ...
    
			
    6. 
						
  6. 最实用的深度学习教程 Practical Deep Learning For Coders (Kaggle 冠军 Jeremy Howard 亲授)
			
    Jeremy Howard 在业界可谓大名鼎鼎.他是大数据竞赛平台 Kaggle 的前主席和首席科学家.他本人还是 Kaggle 的冠军选手.他是美国奇点大学(Singularity Universi ...
    
			
    7. 
						
  7. CSS全屏布局的6种方式
			
    前面的话 全屏布局在实际工作中是很常用的,比如管理系统.监控平台等.本文将介绍关于全屏布局的6种思路 float [1]float + calc 通过calc()函数计算出.middle元素的高度,并 ...
    
			
    8. 
						
  8. 【题解】ID分配
			
    题目描述 您正在处理要为每个客户端分配唯一ID的特定系统的后端.但是,系统是分布式的,并且有许多组件,每个组件都必须能够为客户端分配ID.换句话说,您希望每个组件都使用尽可能少的组件之间的通信来分配I ...
    
			
    9. 
						
  9. [luogu4268][bzoj5195][USACO18FEB]Directory Traversal
			
    题目大意 给你\(n\)个文件的关系,求出某一个点,这个点到叶节点的长度的总距离最短.(相对长度的定义在题目上有说明) 感想 吐槽一下出题人,为什么出的题目怎么难看懂,我看了整整半个小时,才看懂. 题 ...
    
			
    10. 
						
  10. 【转】stm32CubeMx上移植自己的printf()和scanf()函数
			
    要想printf()和scanf() 函数工作,我们需要把printf()和scanf() 重新定向到串口中.重定向是指用户可以自己重写C 的库函数,当连接器检查到用户编写了与C 库函数相同名字的函数 ...
    
			
    11.