初识CSS3
1.CSS规则由两部分构成,即选择器和声明器 声明必须放在{}中并且声明可以是一条或者多条 每条声明由一个属性和值构成,属性和值用冒号分开,每条语句用英文冒号分开
注意: css的最后一条声明,用以结束的“;”可写可不写,但是基于W3c标准规范思考建议最后一条声明的结束“;”都要写上
2.行内样式 直接在style属性设置css样式style属性提供了一种改变所有的HTML元素样式的通用方法 语法:
<h1 style="color:red">style属性的应用</h1>
<p style="font-size:14px;color:green;">直接在HTML标签设置样式</p>
3.内部样式 把css代码写在<head>的<style>标签中与HTMl内部位于同一个HTML文件中,这就是内部样式 4.外部样式 就是把css代码保存为一个单独样式表文件,文件扩展名位.class在页面引用外部样式即可 HTML文件外部样式有两种方式分别是链接式和导入式 1)链接式:
<head>
<link href="...css"rel="stylesheet"type="text/css"
</head>
<!--
rel="stylesheet"是指在本页面使用这个外部样式
type=text/css是指文件的类型是样式表文本
href="...css"文件所在位置
-->
2)导入外部样式表 在HTML网页使用@import导入外部样式导入样式必须放在<style>标签中而<style>标签必须放在<head>标签中
<head>
<style>
@import url(".....css")
</style>
</head>
<!--其中@import导入文件,前面必须放一个符号,url(".....css")表示样式文件位置-->
3)链接式和导入式区别 1.<link/>标签属于XHTML范畴中而@import是css2.1中特有的 2.使用,<link/>的链接css客户端浏览网页时先将css网页加载到网页中,在进行编译显示,所以这种情况下显示出的网页与用户预期的一样即使网速再慢也是一样的效果 3.使用@import导入css文件客户端在浏览网页时先将HTML结构呈现出来再把外部css文件加载到网页中当然最终与<link/>链接效果一样只是当网速较慢时会先显示没有css统一布局的HTML网页,这样会给用户不好的感觉这也是目前大多数网站用连接外部样式表的主要原因 5.样式的优先级:<就近原则>
行内元素>内部样式表>外部样式表
注:代码是逐条执行,如果内部样式比外部样式先声明,则外部样式具有优先级 6.css3的选择器 标签选择器 类选择器 和id选择器 1)类选择器
类选择器即<即标签名 class"类名称">标签内容</标签名>
.green{
font-size:20px;
color:red;
}
<p class="green">hhhh</p>
2)id选择器
#green{
font-size:20px;
color:red;
}
<p id="green">hhhh</p>
注意:id选择器只能使用一次,也就是说在同一页面同一个id属性只能设置一次;而类选择器可以在页面使用多次
3)选择器的优先级
id选择器>class类选择器>标签选择器 7.css3高级选择器 1. 层次选择器 1)E F 后代选择器 选择匹配的F元素,且匹配的F元素被包含在匹配的E元素中 2) E>F 子选择器 选择匹配的F元素,且匹配的F元素是匹配E元素的子元素 3) E+F 相邻兄弟选择器 选择匹配的F元素,且匹配的F元素仅位于匹配的E元素后面 4)E~F 通用兄弟选择器 选择匹配的F元素,且匹配的E元素后所有匹配的F元素
注:1)通用兄弟选择器选中的是E元素相邻的后面兄弟元素下,是一个或多个元素; 2)相邻兄弟选中的是与E元素仅挨的F元素,其中选中的仅是一个元素
8.结构伪类选择器
1)E:first-child 作为父元素的第一个子元素的元素E 2) E:last-child 作为父元素的最后一个子元素的元素E 3)E F:nth-child(n) 选择父级元素E 的第n个元素F(n可以是1/2/3)关键字为even odd 4)E:first-of-type 选择父级元素具有指定类型的第一个E元素 5)E:last-of-type 选择父级元素具有指定类型的最后一个E元素 6)E F:nth-of-type(n) 选择父元素内具有指定类型的第n个F元素
注:E F:nth-child(n)和 E F:nth-of-type(n)使用时记住以下关键点:
1)E F:nth-child(n)在父级里从第一个元素开始查找,不分类型 2)E F:nth-of-type(n)在父级里先看类型再看位置
9.属性选择器 1)E[attr] 相匹配具有属性attr的E元素 2)E[attr=val] 选择匹配具有属性attr的E元素 并且属性值位val(其中Val区分大小写) 3)E[attr^=val] 选择匹配元素E,且E元素定义了属性attr,其中属性值以val开头的任意字符串 4)E[attr$=val] 选择匹配元素E,且E元素定义了属性attr,其中属性值以val结尾的任意字符串 5)E[attr*=val] 选择匹配元素E,且E元素定义了属性attr,其中包含了"val"话句话说,字符串val与属性值中的任意位置相匹配
- NYOJ------汉诺塔(一)
- HDUOJ----Coin Change
- Golang语言社区--列出目录和遍历目录的方法
- HDUOJ-------单词数
- insert导致的性能问题大排查(r11笔记第26天)
- NYOJ-----最少乘法次数
- nyOJ-----韩信点兵
- HDUOJ-----A == B ?
- 用Oracle的眼光来学习MySQL 5.7的sys(上)(r11笔记第24天)
- Golang下通过syscall调用win32的api
- NYOJ----蛇形填数
- Golang语言 syscall 例子
- 用Oracle的眼光来学习MySQL 5.7的sys(下)(r11笔记第25天)
- HDUOJ-----Climbing Worm
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Android-Jetpack笔记-Navigation之Fragment使用
- Android-Jetpack笔记-Navigation之Fragment支持复用
- Android-Jetpack笔记-Room
- 代理模式看这一篇就够了~
- Spark MLlib中KMeans聚类算法的解析和应用
- 通过 PHP 代码发送 HTTP 响应与文件下载
- 玩转 PhpStorm 系列(八):Vim 篇
- Android-Jetpack笔记-Paging结合数据库
- 分享 OWIN 静态文件处理中间件
- Android-Jetpack笔记-Paging结合网络数据
- 在 VS 2015 中使用 Gulp 编译 TypeScript
- Android-Jetpack笔记-WorkManager
- Android | Tangram动态页面之路(一)需求背景
- 吐槽 Micorsoft.Owin 的设计
- Android | Tangram动态页面之路(二)介绍