第一章 CSS基础
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基础的更多相关文章
- 第一章 jQuery基础
第一章jQuery基础 一.jQuert简介 1.什么是jQuery jQuery是javaScript的程序库之一,它是javaScript对象和实用函数的封装. jQuery是继Prototype ...
- 《零成本实现Web自动化测试--基于Selenium》第一章 自动化测试基础
第一篇 Selenium 和WebDriver工具篇 第一章 自动化测试基础 1.1 初识自动化测试 自动化测试有两种常见方式 1.1.1 代码驱动测试,又叫测试驱动开发(TDD) 1.1.2 ...
- [Python笔记][第一章Python基础]
2016/1/27学习内容 第一章 Python基础 Python内置函数 见Python内置函数.md del命令 显式删除操作,列表中也可以使用. 基本输入输出 input() 读入进来永远是字符 ...
- web前端学习python之第一章_基础语法(二)
web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...
- web前端学习python之第一章_基础语法(一)
web前端学习python之第一章_基础语法(一) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...
- UNIX环境高级编程--第一章 UNIX基础知识
第一章 UNIX基础知识 1.2 UNIX体系结构 从严格意义上说,可将操作系统定义为一种软件,它控制计算机硬件资源,提供程序运行环境.我们将这种软件称为内核(kernel),因为 它相对较小,且 ...
- 第一章 –– Java基础语法
第一章 –– Java基础语法 span::selection, .CodeMirror-line > span > span::selection { background: #d7d4 ...
- python第一章计算机基础
第一章 计算机基础 1.1 硬件 计算机基本的硬件由:CPU / 内存 / 主板 / 硬盘 / 网卡 / 显卡 / 显示器 等组成,只有硬件但硬件之间无法进行交流和通信. 1.2 操作系统 操作系统用 ...
- Java基础知识二次学习-- 第一章 java基础
基础知识有时候感觉时间长似乎有点生疏,正好这几天有时间有机会,就决定重新做一轮二次学习,挑重避轻 回过头来重新整理基础知识,能收获到之前不少遗漏的,所以这一次就称作查漏补缺吧!废话不多说,开始! 第一 ...
随机推荐
- get post header获取数据方方法
/** * get方式获取数据 * @param $url * @param $data * @return bool|string */public function methodGet($url, ...
- [development][c++] C++构造函数调用构造函数
构造函数调用构造函数是会问题的. 外层函数返回的内存, 与被调用的构造函数返回的内存并不是一个内存. 错误示例代码如下: msg_log(const char *name, const char* t ...
- 启动虚拟机提示"Units specified don’t exist SHSUCDX can’t install"
新建虚拟机快速分区后启动报"Units specified don’t exist SHSUCDX can’t install",试过网上说的 修改BIOS设置方法不起作用 修改虚 ...
- qemu-kvm内存虚拟化1
2017-04-18 记得很早之前分析过KVM内部内存虚拟化的原理,仅仅知道KVM管理一个个slot并以此为基础转换GPA到HVA,却忽略了qemu端最初内存的申请,而今有时间借助于qemu源码分析下 ...
- sublime phpfmt 的格式化
php格式化有几种,这里只说phpfmt.这个插件只支持php7.0+,所以在安装php环境应该支持php7.0.至于低版本,在packagecontrol.io对应的插件页面也又提到. 在subli ...
- vue指令v-html中使用过滤器filters功能
Vue 2.0 不再支持在 v-html 中使用过滤器 解决方法: 1:全局方法(推荐) 2:computed 属性 3:$options.filters(推荐) 1:使用全局方法: 可以在 Vue ...
- dedecms标签(tags)页面伪静态设置
我们在创建文章的时候经常会设置一些tags,如果发表文章时关键词没添加的话tags也会自动成为文章的关键词,tags是一个不错的功能,通过关键词链接可以快速寻找到相关内容,但是标签页面的url经常会带 ...
- OC仿支付宝输入UITextField输入车牌号
效果图,如果使用,出现任何问题请告知,或者下方留言,我好以及改正 .h文件: #import <UIKit/UIKit.h> @interface LicenseKeyBoardView ...
- 20180310 KindEditor 富文本编辑器
问题: 如何判断富文本编辑器文本内容非空 错误的办法,采用js 对控件本身的txt ID 号抓取获取值,由于加载富文本编辑器时,界面的ID 已经经过了修改或者可以用转换来说,所以抓取是无效果的. 需要 ...
- GIt 修改上一次的提交(保持Change-Id不变即可)
背景: 代码提交到gerrit以后,发现提交不对或者缺少了某个文件的改动. 解决: 比如发现test.txt 文件忘记修改了 step1. vim test.txt 修改 step2. git add ...