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. JavaScript 模拟 HashMap例子
			
    function map(){    var map = {}; // Map map = new HashMap();        var key = "key";    va ...
    
			
    2. 
						
  2. ASP.NET MVC与WebForm对比
			
    MVC优点:1.分离更彻底,分层清晰,易于维护和扩展.2.验证更加方便快捷.3.无ViewState,页面更加干净4.路由更容易定义url,对SEO比较好.5.强类型VIEW实现,更安全高效. Web ...
    
			
    3. 
						
  3. Docker(二十)-Docker容器CPU、memory资源限制
			
    背景 在使用 docker 运行容器时,默认的情况下,docker没有对容器进行硬件资源的限制,当一台主机上运行几百个容器,这些容器虽然互相隔离,但是底层却使用着相同的 CPU.内存和磁盘资源.如果不 ...
    
			
    4. 
						
  4. [转帖]从 2G 到 5G，手机上网话语权的三次改变
			
    从 2G 到 5G,手机上网话语权的三次改变 美国第一大电信运营商 Verizon 公司的 CEO Hans Vestberg 手持一部 iPad,屏幕上显示俯瞰地面的飞行地图.400 多公里外的洛杉 ...
    
			
    5. 
						
  5. Android控件第6类——杂项控件
			
    1.Toast Toast用于显示提示信息. Toast不会获得焦点,没法关闭,过段时间会自动消失. 使用方法:Toast.makeText获得Toast,并设置相关属性.调用Toast对象的show ...
    
			
    6. 
						
  6. shell of leetcode
			
    1.Tenth Line How would you print just the 10th line of a file? For example, assume that file.txt has ...
    
			
    7. 
						
  7. pandas创建一个日期
			
    1.通过指定周期和频率,使用date.range()函数就可以创建日期序列. 默认情况下,范围的频率是天. 2.bdate_range()用来表示商业日期范围,不同于date_range(),它不包括 ...
    
			
    8. 
						
  8. 关于python 自带csv库的使用心得 附带操作实例以及excel下乱码的解决
			
    因为上次帮我们产品处理过一个文件,他想生成能excel处理操作的.但是上次由于时间非常紧张,所以并没有处理好. 正好无聊就来好好研究一下 ,找算法要了几个 csv文件.来好好玩一玩. 全篇使用了pyt ...
    
			
    9. 
						
  9. BZOJ5343[Ctsc2018]混合果汁——主席树+二分答案
			
    题目链接: CTSC2018混合果汁 显然如果美味度高的合法那么美味度低的一定合法,因为美味度低的可选方案包含美味度高的可选方案. 那么我们二分一个美味度作为答案然后考虑如何验证? 选择时显然要贪心的 ...
    
			
    10. 
						
  10. BZOJ1069 SCOI2007最大土地面积（凸包+旋转卡壳）
			
    求出凸包,显然四个点在凸包上.考虑枚举某点,再移动另一点作为对角线,容易发现剩下两点的最优位置是单调的.过程类似旋转卡壳. #include<iostream> #include<c ...
    
			
    11.