第四章css初识
1.CSS(层叠样式表)
2.CSS语法
选择器{
属性名1:属性值1;
属性名2:属性值2;
}
3.引用CSS的三种方式
第一种:行内样式
例:<a style="color:red;">内部样式</a>
第二种:内部样式
在head标签中,写入style标签.
例:
<head>
.......
<style type="text/css">
h1{
.........
}
</style>
</head>
第三种:外部样式
使用步骤:
a)创建一个以.css为后缀的文件(css文件)
b)在html中通过link引入css文件
<link rel="stylesheet" href="css文件路径"/>
4.基本选择器
4.1 标签选择器
标签名{}
4.2 类选择器
.class属性值{}
4.3 id选择器
#id属性值{}
5.层次选择器
5.1 后代选择器
父元素 子元素{}
5.2 子选择器
父元素>子元素{}
5.3 相邻兄弟选择器
本元素+相邻兄弟元素{}
5.4 通用兄弟选择器
本元素~兄弟元素{}
6.结构伪类选择器
E F:first-child{} //第一个子元素
E F:last-child{} //最后一个子元素
E F:nth-child(?){} // ?表示第几个子元素,还可以使odd奇数,even偶数
E F:first-of-type{} //指定类型的第一个元素
E F:last-of-type{} //指定类型的最后一个元素
E F:nth-of-type(?){} //?表示指定类型第几个子元素
注意:
E F:nth-child(n)在父级里从一个元素开始查找,不分类型.
E F:nth-of-type(n)在父级里先看类型,再看位置.
7. 属性选择器
E[attr] //具有属性attr的元素
E[attr=val] //属性attr的值是val的元素
E[attr^=val] //属性attr的值以val开头的元素
E[attr$=val] //属性attr的值以val结尾的元素
E[attr*=val] //属性attr的值包含val的元素
第四章css初识的更多相关文章
- web—第四章css&第五章
web—第四章css&第五章 终于迎接等待已久的CSS,在没学这个之前,我们只会用一点img,查一点小图片,或者是用style改一下颜色,而且比较麻烦.现在多了个css在文件夹在创建一个cs ...
- 第四章 CSS基础
1.CSS是cascading style sheets 层叠样式表.样式定义如何显示html元素,通常存储在样式表中,将样式添加到html中,是为了解决内容与表现分离的问题. 2.外部样式表可以极大 ...
- 第四章:初识CSS3
1.CSS规则由两部分构成,即选择器和声明器 声明必须放在{}中并且声明可以是一条或者多条 每条声明由一个属性和值构成,属性和值用冒号分开,每条语句用英文冒号分开 注意: css的最后一条声明,用以结 ...
- [CSS]《CSS揭秘》第四章——视觉效果
投影 单侧投影 box-shadow:0px 10px 10px -5px black; 邻边投影 box-shadow:10px 10px 10px 2px black; 双侧投影 box-shad ...
- 《Django By Example》第四章 中文 翻译 (个人学习,渣翻)
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:祝大家新年快乐,这次带来<D ...
- 《深入理解bootstrap》读书笔记:第4章 CSS组件(下)
十. 标签(.label类,label-xxx) 高亮一些标题部分. 1 2 3 4 5 6 <h1>HELLO<span class="label label-defau ...
- 第四章SignalR自托管主机
第四章SignalR自托管主机 SignalR服务器通常在IIS的Asp.Net应用程序上承载,但它也可以使用自托管库来作为自托管的主机来运行(就像控制台应用程序或Windows服务那样)与Signa ...
- Knockout应用开发指南 第四章:模板绑定
原文:Knockout应用开发指南 第四章:模板绑定 模板绑定The template binding 目的 template绑定通过模板将数据render到页面.模板绑定对于构建嵌套结构的页面非常方 ...
- JavaScript DOM编程艺术-学习笔记(第三章、第四章)
第三章: 1.js的对象分为三种:①用户自定义对象 ② 内建对象(js提供的对象) ③宿主对象(js寄宿的环境-浏览器,提供的对象) 2.文档是由节点组成的集合,即dom树,html元素是根元素,是唯 ...
随机推荐
- Echarts 柱状图配置详解
1.基本柱状图 // 指定图表的配置项和数据 var option = { // ---- 标题 ----- title: { text: '主标题', textStyle: { color: 're ...
- Java锁与CAS
一.加锁与无锁CAS 在谈论无锁概念时,总会关联起乐观派与悲观派,对于乐观派而言,他们认为事情总会往好的方向发展,总是认为坏的情况发生的概率特别小,可以无所顾忌地做事,但对于悲观派而已,他们总会认为发 ...
- vue 显示 webpack-dev-server不是内部命令的解决办法
然后在cmd中cd到项目目录,依次运行命令: npm install 和 npm run build 最后运行 npm run dev 后项目成功运行.
- netty初试
netty官网:点击进入 学习netty之实现一个丢弃服务器 环境: JDK1.8 netty5.0+ 步骤: 实现一个丢弃服务器 实现一个客户端发送数据 丢弃服务器的创建 //用于接受客户端的的连接 ...
- Bigger-Mai 养成计划,subprocess模块
subprocess模块是python从2.4版本开始引入的模块.主要用来取代 一些旧的模块方法,如os.system.os.spawn*.os.popen*.commands.*等.subproce ...
- Logstash使用介绍
Logstash介绍 Logstash是一个数据收集处理转发系统,是 Java开源项目. 它只做三件事: 数据输入 数据加工(不是必须的):如过滤,改写等 数据输出 下载安装 logstash是基 ...
- shell编程(六)之数组
数组: 存储多个元素的连续的内存空间 索引: 编号从0开始,属于数值索引 注意:索引也可支持使用自定义的格式,而不仅仅是数值格式 声明数组: declare -a ARRAY_NAME declare ...
- Git学习笔记——分支
分支用法很多,比如bug修复,协作管理,这里只简单介绍我在工作中用到的协作模式. 场景:我自己开发独立功能,在本地为自己创建一个分支就叫localbranch吧,甭管master到哪了,我只管开发我的 ...
- 论文笔记:Auto-ReID: Searching for a Part-aware ConvNet for Person Re-Identification
Auto-ReID: Searching for a Part-aware ConvNet for Person Re-Identification 2019-03-26 15:27:10 Paper ...
- Python玩转Arduino——简单介绍
关于Python语言的介绍安装请参考廖雪峰的Python教程 Python是一门解释型语言,虽然不能够像c语言一样编译上传到Arduino--什么你说MicroPython,我们再说Arduino呢- ...