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. VMMAP的简单使用
			
    1. dotnet.exe 进程占用内存非常疯狂.. 开发同事 提供了一个工具进行简单分析 vmmap.exe 执行了 Ctrl+E 之后 发现将 heap 和managed heap 的内容放到了p ...
    
			
    2. 
						
  2. Excel 使用AutoFill提示“类Range的AutoFill方法无效”
			
    今天遇到一个神奇的问题,之前一直使用很好的代码突然报错:“类Range的AutoFill方法无效”,在网上搜索了一番,感觉没有一个与我遇到的情况相同的.debug,查看一下代码,发现程序里,AutoF ...
    
			
    3. 
						
  3. 设计模式之工厂模式（c++）
			
    问题描述 在面向对象系统设计中经常可以遇到以下的两类问题:1)为了提高内聚(Cohesion)和松耦合(Coupling),我们经常会抽象出一些类的公共接口以形成抽象基类或者接口.这样我们可以通过声明 ...
    
			
    4. 
						
  4. Python 零基础 快速入门 趣味教程 (咪博士 海龟绘图 turtle) 7. 条件循环
			
    条件循环能够让程序在条件成立时(即为真时)重复执行循环体中的语句.如果条件一直成立(即永远不会为假),则循环会一直进行下去,不会停止.如果初始时,条件不成立,则循环 1 次也不会执行.Python 中 ...
    
			
    5. 
						
  5. webapi Get Post
			
    转载:http://www.cnblogs.com/Juvy/p/3903974.html 在WebAPI中,请求主体(HttpContent)只能被读取一次,不被缓存,只能向前读取的流. 举例子说明 ...
    
			
    6. 
						
  6. MT【217】韦达定理应用
			
    若2018次方程$x^{2018}-4036x^{2017}+a_{2016}x^{2016}+\cdots+a_1x+a_0=0$ 有2018个正实数, 则对于所有可能的方程$\sum\limits ...
    
			
    7. 
						
  7. 【ZOJ2278】Fight for Food（dp）
			
    BUPT2017 wintertraining(16) #4 F ZOJ - 2278 题意 给定一个10*10以内的地图,和p(P<=30000)只老鼠,给定其出现位置和时间T(T<=1 ...
    
			
    8. 
						
  8. 【ZOJ2276】Lara Croft（bfs）
			
    BUPT2017 wintertraining(16) #4 D ZOJ - 2276 题意 n个数字绕成环,有两个指示数字的方块,每次可以顺时针或逆时针移动其中一个,步数是它当前位置的数字a[i], ...
    
			
    9. 
						
  9. 【BZOJ3551】【BZOJ3545】 【ONTAK2010】 Peaks (kruskal重构树+主席树)
			
    Description ​ 在\(Bytemountains\)有\(~n~\)座山峰,每座山峰有他的高度\(~h_i~\). 有些山峰之间有双向道路相连,共\(~m~\)条路径,每条路径有一个困难值 ...
    
			
    10. 
						
  10. 自学Python6.1-模块简介
			
    自学Python之路-Python基础+模块+面向对象自学Python之路-Python网络编程自学Python之路-Python并发编程+数据库+前端自学Python之路-django 自学Pyth ...
    
			
    11.