Study 5 —— CSS概述
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概述的更多相关文章
- xhtml和css概述
Xhtml和css概述 1.html的过渡到xhtml html与xhtml不是两种语言,它们是一种语言的不同阶段,有点类似于文言文和白话文之间的关系.因为网络技术的日新月异,html的不断改进,所以 ...
- 一、CSS概述 二、CSS的选择器（认识） 三、CSS样式和属性（练习） 四、重构商城首页DIV+CSS(页面布局)（重点） 浮动/更改显示方式
一.CSS概述###<1>概念 DIV,就是一个HTML元素,块级元素,通常结合CSS进行页面的布局. CSS,层叠样式表,给HTML元素增强显示. ###<2>作用 样式定义 ...
- Unit02： CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明
Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html&g ...
- Web前端：1、HTML&CSS概述及结构
万维网联盟(World Wide Web Consortium)简称W3C,专门为了定义网页相关的标准而成立,如网页中的HTML.CSS.DOM.HTTP.XML等标准. 根据W3C标准,一个网页主要 ...
- CSS概述<选择器总结>
概述:CSS是指层叠样式表,他是定义如何显示HTML元素,样式表通常存储在样式表中,通常存储在.css文件中,下面对css的选择器进行总结,便大家夯实基础! 1 语法规范: 每个样式规则有两个部分:选 ...
- python css概述
1. 概述 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style ...
- 后端码农谈前端（CSS篇）第一课：CSS概述
一.从扮演浏览器开始 扮演浏览器是Head First图书中很有意义的一个环节.可作者忘记了告诉我们扮演浏览器的台本.我们从这里开始. 上图是webkit内核渲染html和css的流程图.从该图我们可 ...
- css概述
前言 1.CSS cascading stylesheet 级联样式表 ,外观显示(页面内容显示的方式).CSS文档以.css作为后缀 2.w3c推荐页面文件定义 数据和结 ...
- 网页三剑客：HTML+CSS+JavaScript 之CSS概述
CSS 简介 什么是 CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是 ...
随机推荐
- PAT 1081 检查密码
https://pintia.cn/problem-sets/994805260223102976/problems/994805261217153024 本题要求你帮助某网站的用户注册模块写一个密码 ...
- Win10 1803 Spring Creators update Consumer edition的版本记录
安装时可选择的版本列表 安装完之后的版本: 3. 时间线更新 4. Focus assistant
- 日常工作: 应用服务器Oracle驱动问题说明
1. .net使用Oracle驱动的发展等 作为.net线的产品的ERP产品 最初的版本 使用了.net 1.1发布时 微软提供的Oracle的驱动 但是后续微软的.net产品线貌似没有继续发展相应的 ...
- Ubuntu16.04.3安装以及简单配置使用
1. 官网下载ubuntu16.04.3的iso 2.上传至esxi 3. 中文安装界面有问题,使用english进行安装. 4. server版本的应该不带gui的界面进行安装... 5.使用非ro ...
- laravel 共享session问题总结
我现在有一个A系统已经上线了,但是要开始研发另外一个功能,我打算把这个功能独立成一个B系统出来,放在其他域名下面,打算在这个A系统登录后,里面一个连接跳转到B系统,看到一些资料说用到共享Session ...
- python模块_pcharm导入包的问题
1.添加pip包 2.导入项目需要由内置包(library root)
- Linux LVM逻辑卷配置过程详解（创建，增加，减少，删除，卸载）
Linux LVM逻辑卷配置过程详解 许多Linux使用者安装操作系统时都会遇到这样的困境:如何精确评估和分配各个硬盘分区的容量,如果当初评估不准确,一旦系统分区不够用时可能不得不备份.删除相关数据, ...
- Codeforces Round #381 (Div. 2)C Alyona and mex
Alyona's mother wants to present an array of n non-negative integers to Alyona. The array should be ...
- pipreqs 组件
作用 帮助你查询所有需要用的组件 安装 pip install pipreqs 使用 """ 切换到项目的路径下 执行查询当前文件下所需要的所有的组件 会生成一个 r ...
- Linux 系统免密码登陆远程服务器
在当前Linux生成公钥私钥ssh-keygen公钥私钥存放路径为:~/root/.ssh/id_rsa id_rsa.pub 登陆被远程主机,进入目录~/root/.ssh/是否存在authoriz ...