HTML 第4章初始CSS3
什么是CSS？
CSS全称为层叠样式表，通常又称为风格样式表。
引用CSS样式:
语法：
<h1 styske="color:red;">style属性的应用</h1>
<p style="font-size:14px;color:green;">直接在HTML标签中设置样式</p>
内部样式表：
把CSS代码写在<head>的<style>标签中，与HTML内容在位于同一个HTML文件中。
外部样式表：
链接外部样式表：
语法：
<head>
。。。
<link href="style.css"rel="stlesheet"type="text/css">
。。。。
</head>
导入外部样式表：
语法：
<head>
。。。。。。
<style>
<!--
@import url（"common.css"）;
-->
</style>
</head>
CSS3的基本选择器：
（1）：标签选择器；
（2）：类选择器；
（3）：ID选择器；
CSS3的高级选择器：
（1）层次选择器：
选择器 类型 代码 <style type="text/css>
E F 后代选择器 body p{ background:red;}</style>
E>F 子选择器 body>p{background:pink;}</style>
E+F 相邻兄弟选择器 body+p{background:green;}</style>
E-F 通用兄弟选择器 body-p{backgroound:yellow;}</style>
（2）结构伪类选择器：
E:first-child；
E:last-child；
E F:nth-child；
E:fisrt-of-type；
E:last-of-type；
E F:nth-of-type；
（3）属性选择器：
选择器 代码
E[attr] a[id]{background:yellow;}; a[id][target]{background:yellow;]
E[attr=val] a[id=first]{background:red;]
E[attr$=val] a[class*=links]{backgrond:red;}
E[attr^=val] a[hreff^=http]{background:red;}
E[attr*=val] a[href$=png]{background:red;}
实例代码：
（1）;
<html>
<head lang="en">
<meta charset="UTF-8">
<title>样式引用优先级问题</title>
<!--外部样式表-->
<style>
h1{
color:green;
}
</style>
</head>
<body>
<h1 style=color:red">。。。</h1><!--行内样式-->
<p>。。。。</p>
<p>。。。。。</p>
</body>
</html>
（2）:
<html>
<head lang="en">
<meta charset="UTF-8">
<title>三种基本选择器的优先级</title>
<style type="text/css">
p{
font-size:14px;
color:red;
}
h1{
color:blue;
}
.h1{
color:pink;
}
#h1{
color:green;
}
</style>
</head>
<body>
<h1 class="h1" id="h1">。。。</h1>
<p>。。。。</p>
</body>
</html>
HTML 第4章初始CSS3的更多相关文章
- 第四章初始CSS3预习笔记
第四章 初始CSS3预习笔记 一: 1: 什么是CSS? 全称是层叠样式表;/通常又称为风格样式表,.他是用来进行网页风格设计的; 2:CSS的优势: 1>内容以表现分离,即使用u前面学习的HT ...
- 学习笔记 第十四章 使用CSS3动画
第14章 使用CSS3动画 [学习重点] 设计2D动画 设计3D动画 设计过渡动画 设计帧动画 能够使用CSS3动画功能设计页面特效样式 14.1 设计2D动画 CSS2D Transform表 ...
- 学习笔记 第十三章 使用CSS3新布局
第13章 使用CSS3新布局 [学习重点] 设计多列布局 设计弹性盒布局样式 使用CSS3布局技术设计适用移动需求的网页 13.1 多列布局 CSS3使用columns属性定义多列布局,用法如下 ...
- 初始CSS3
初始CSS31.1.什么是CSSCSS全程为层叠样式表(Cascading Style Sheet),通常又称为风格样式表(Style Sheet)它是用来进行网页风格设计的.1.CSS在网页中的应用 ...
- 零基础学Python--------入门篇 第1章 初始Python
入门篇 第1章 初始Python 1.1 Pyhton 概述 1.1.1 了解 Python Python,本义是指“蟒蛇”.1989年,荷兰人Guido van Rossum发明了一种面向对象的 ...
- Testlink1.9.17使用方法( 第三章 初始配置[配置用户、产品] ）
第三章 初始配置(配置用户.产品) 一. 设置用户 QQ交流群:585499566 在TestLink系统中,每个用户都可以维护自己的私有信息.admin可以创建用户,但不能看到其它用户的密码.在用户 ...
- 第一章 初始C语言
第一章 初始C语言 目录 第一章 初始C语言 1. C语言起源 2. 选择C语言的理由 2.1 设计特性 2.2 高效性 2.3 可移植性 2.4 强大而灵活 2.5 面向程序员 3. C语言的应用范 ...
- 大话ASP.NET开发(第一章 html5+css3+解耦问题的探讨)
一.拉近我们的距离 我想,很多人会问,如今IE6还占据颇多份额的中国,html5.css3是否还很遥远?我会很直接告诉他们:其实就在你的眼前.我们来看两个图: ...
- 第一章: 初始JVM
跟很多人一样,我一开始接触 Java 虚拟机只是因为面试需要用到,所以硬着头皮看看.所以很多人对于为什么要学虚拟机这个问题,他们的答案都是:因为面试. 因为装逼 但我经过了几年的学习和实战,我发现其实 ...
随机推荐
- .netcore Control调用View方法
控制器代码如下: 视图代码如下: 完整项目代码参考网址:https://github.com/gamecc666/BackTipFrontProject 版权声明:本文为博主原创文章,如需转载,请标明 ...
- 看看大神 Paul Graham 对如何学习编程的回答
前言 我翻阅自己之前写的博客文章,发现在 2015 年我刚开始学习编程的时候,翻译了一段 Paul Graham 关于"How can I learn to program?"的回 ...
- Android安卓书籍推荐《Android驱动开发与移植实战详解》下载
百度云下载地址:点我 Android凭借其开源性.优异的用户体验和极为方便的开发方式,赢得了广大用户和开发者的青睐,目前已经发展成为市场占有率很高的智能手机操作系统. <Android驱动开发与 ...
- java高并发系列 - 第6天:线程的基本操作
新建线程 新建线程很简单.只需要使用new关键字创建一个线程对象,然后调用它的start()启动线程即可. Thread thread1 = new Thread1(); t1.start(); 那么 ...
- Java虚拟机详解（三）------垃圾回收
如果对C++这门语言熟悉的人,再来看Java,就会发现这两者对垃圾(内存)回收的策略有很大的不同. C++:垃圾回收很重要,我们必须要自己来回收!!! Java:垃圾回收很重要,我们必须交给系统来帮我 ...
- Redis图形化客户端管理软件推荐
Redis是一个超精简的基于内存的键值对NOSQL数据库(key-value),一般对并发有一定要求的应用都用其储存session,乃至整个数据库.不过它公自带一个最小化的命令行式的数据库管理工具re ...
- Python 定义自己的常量类
在实际的程序开发中,我们通常会将一个不可变的变量声明为一个常量.在很多高级语言中都会提供常量的关键字来定义常量,如 C++ 中的 const , Java 中的 final 等,但是 Python 语 ...
- BeanUtils.copyProperties的用法
实现原理 原理 target.set + source的属性名(source.get + source的属性名):所有source必须有get方法,target必须有set方法 一. springfr ...
- Windows 10打开远程桌面的方法
今天使用windows 10,想要用远程桌面连接,可是怎么都找不到,哎,win10相比于win7和XP系统,感觉还是有点使用不习惯.不过后来还是找到了两个方法,在此记录下来,分享给需要的朋友. 1. ...
- dubbo框架设计学习
1.整体设计 (1)架构图 图例说明: 图中左边淡蓝背景的为服务消费方使用的接口,右边淡绿色背景的为服务提供方使用的接口,位于中轴线上的为双方都用到的接口. 图中从下至上分为十层,各层均为单向依赖,右 ...