1、CSS：层叠样式表
（1）好处：结构样式分离、样式复用、精确控制布局定位、方便搜索引擎搜索
（2）用途：美化修饰、布局定位

2、CSS样式表使用方式（3种）：
（1）内嵌样式[行内样式]：确定到具体元素，控制相应元素，不建议使用。

（2）内部样式：
<head>
<style type="text/css">
样式内容
</style>
</head>

（3）导入 <style type="text/css">@import "外部样式路径";</style>

（4）外部样式——重点、常用
<head>
<link type="text/css" href="外联样式路径" rel="stylesheet" />
</head>

注：先引入样式==》然后编写样式==》最后使用样式

3、选择器
（1）元素选择器 ——选择同种标签
定义时直接使用元素名称作为选择器
使用时直接对元素进行修饰

（2）类选择器 ——选择同类名的元素
定义时使用“.”开头加自定义类名 作为选择器
使用时对元素的class属性赋"相应类名"值进行修饰

（3）id选择器 ——选择唯一的id
定义时使用“#”开头加自定义5d名 作为选择器
使用时对元素的id属性赋"id名"值进行修饰

（4）交集选择器：要求满足所有要求才能产生的修饰
标签选择器、id选择器、类选择器任意组合——直接连接使用，不能使用空格

（5）并集选择器：只要满足其中一种选择器就可以使用
标签选择器、id选择器、类选择器任意组合——使用","连接选择器。

（6）后代选择器==》父亲 儿子 ，父亲标签包着儿子标签
标签选择器、id选择器、类选择器任意组合——使用空格连接

（7）全局选择器:选择整个网页,使用*，例如：
*{backgroung-color:#00F;}

4.

CSS样式优先级
【一个元素允许同时应用多种样式，页面元素最终的样式即为多种样式的叠加效果。】
（1）引入方式优先级-就近原则：行内样式表>内部样式表>外部样式表>浏览器默认样式【后来居上】
（2）选择器的优先级-就少原则：id选择器>类选择器>标签选择器

5.伪类选择器【超链接】
（1）超链接样式的特点-超链接样式的特殊性
?文本或图像加上链接，将失去原样式而继承链接的样式。
（2）伪类：状态的方式分别定义样式，一般称为伪类
超链接伪类样式的四种状态——<a>
?未访问状态 （a:link）
?已访问状态 （a:visited）
?鼠标移上状态 （a:hover）
?激活选定状态 （a:active）

link伪类：（:link，:visited）链接专用

动态伪类：（:hover，:active，:focus-IE8↑）大多数元素可用

【父级元素+空格+子元素】，这种写法可以增加代码可读性，规定了具体范围。
. nav ul 指的是nav类里面的ul标签。
（3）设置超链接样式的步骤：
?确定页面间所有链接样式是否相同，否则分开定义。【使用类选择器和上述4来确定范围】
?先定义四个状态共有样式，再分别定义其他状态。【共有样式写在标签里，状态样式写在伪类状态里】

第一章 CSS基础的更多相关文章

  1. 第一章 jQuery基础

    第一章jQuery基础 一.jQuert简介 1.什么是jQuery jQuery是javaScript的程序库之一,它是javaScript对象和实用函数的封装. jQuery是继Prototype ...

  2. 《零成本实现Web自动化测试--基于Selenium》第一章 自动化测试基础

    第一篇 Selenium 和WebDriver工具篇 第一章 自动化测试基础 1.1    初识自动化测试 自动化测试有两种常见方式 1.1.1 代码驱动测试,又叫测试驱动开发(TDD) 1.1.2 ...

  3. [Python笔记][第一章Python基础]

    2016/1/27学习内容 第一章 Python基础 Python内置函数 见Python内置函数.md del命令 显式删除操作,列表中也可以使用. 基本输入输出 input() 读入进来永远是字符 ...

  4. web前端学习python之第一章_基础语法(二)

    web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...

  5. web前端学习python之第一章_基础语法(一)

    web前端学习python之第一章_基础语法(一) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...

  6. UNIX环境高级编程--第一章 UNIX基础知识

    第一章 UNIX基础知识 1.2 UNIX体系结构   从严格意义上说,可将操作系统定义为一种软件,它控制计算机硬件资源,提供程序运行环境.我们将这种软件称为内核(kernel),因为 它相对较小,且 ...

  7. 第一章 –– Java基础语法

    第一章 –– Java基础语法 span::selection, .CodeMirror-line > span > span::selection { background: #d7d4 ...

  8. python第一章计算机基础

    第一章 计算机基础 1.1 硬件 计算机基本的硬件由:CPU / 内存 / 主板 / 硬盘 / 网卡 / 显卡 / 显示器 等组成,只有硬件但硬件之间无法进行交流和通信. 1.2 操作系统 操作系统用 ...

  9. Java基础知识二次学习-- 第一章 java基础

    基础知识有时候感觉时间长似乎有点生疏,正好这几天有时间有机会,就决定重新做一轮二次学习,挑重避轻 回过头来重新整理基础知识,能收获到之前不少遗漏的,所以这一次就称作查漏补缺吧!废话不多说,开始! 第一 ...

随机推荐

  1. 如何使用ffmpeg

    https://blog.csdn.net/minger1202/article/details/52468986  解码 https://www.jianshu.com/p/c6cfe2edd083 ...

  2. 网站性能优化实战——从12.67s到1.06s的故事

    文章摘自https://juejin.im/post/5b0b7d74518825158e173a0c 作为互联网项目,最重要的便是用户体验.在举国“互联网+”的热潮中,用户至上也已经被大多数企业所接 ...

  3. Chap5:操作文件和目录[The Linux Command Line]

    Wildcards Wildcard Meaning * Matches any characters ? Matches any single character [characters] Matc ...

  4. [daily][editer] 二进制编辑工具 hyx

    用了众多之后,终于发现了一个好用的二进制编辑工具: hyx https://yx7.cc/code/ https://en.wikipedia.org/wiki/Comparison_of_hex_e ...

  5. python的数据库链接

    https://blog.csdn.net/canofy/article/details/83294330#-*-coding:utf-8-*-import MySQLdb #yum update p ...

  6. 图->存储结构->邻接多重表

    文字描述 邻接多重表是无向图的另一种链式存储结构. 虽然邻接表是无向图的一种很有效的存储结构,在邻接表中容易求得顶点和边的各种信息. 但是,在邻接表中每一条边(vi,vj)有两个结点,分别在第i个和第 ...

  7. java 线程（五）线程安全 Lock接口

    package cn.sasa.demo3; import java.util.concurrent.ExecutionException; public class ThreadDemo { pub ...

  8. 如何在js中将统计代码图标隐藏

    建站时我们都会加一下网站统计,方便把控内容的内容的运营.大部分站长安装的站点统计是第三方统计代码,js形式的,很少用以服务器日志为基础分析的统计.(当然能通过网站日志来分析网站的运营者比一般的站长水平 ...

  9. ros 运行rviz时出现 QXcbConnection: XCB error: 148 错误 解决方法

    出现上述问题的原因: 1.由于使用了nvc远程控制下位机: 2.rviz是一个基于opengl开发的图形插件,需要使用理论的屏幕参数(thetis' screen),由于使用了teamviewer会导 ...

  10. Sql server 函数--取值年月

    GetDate()是获取当前时间 1.例如获取年月类似 201706 需要改为语句: Select Datename(year,GetDate())+Datename(month,GetDate())