什么是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的更多相关文章

  1. 第四章初始CSS3预习笔记

    第四章 初始CSS3预习笔记 一: 1: 什么是CSS? 全称是层叠样式表;/通常又称为风格样式表,.他是用来进行网页风格设计的; 2:CSS的优势: 1>内容以表现分离,即使用u前面学习的HT ...

  2. 学习笔记 第十四章 使用CSS3动画

    第14章   使用CSS3动画 [学习重点] 设计2D动画 设计3D动画 设计过渡动画 设计帧动画 能够使用CSS3动画功能设计页面特效样式 14.1  设计2D动画 CSS2D Transform表 ...

  3. 学习笔记 第十三章 使用CSS3新布局

    第13章   使用CSS3新布局 [学习重点] 设计多列布局 设计弹性盒布局样式 使用CSS3布局技术设计适用移动需求的网页 13.1  多列布局 CSS3使用columns属性定义多列布局,用法如下 ...

  4. 初始CSS3

    初始CSS31.1.什么是CSSCSS全程为层叠样式表(Cascading Style Sheet),通常又称为风格样式表(Style Sheet)它是用来进行网页风格设计的.1.CSS在网页中的应用 ...

  5. 零基础学Python--------入门篇 第1章 初始Python

    入门篇 第1章  初始Python 1.1  Pyhton 概述 1.1.1 了解 Python Python,本义是指“蟒蛇”.1989年,荷兰人Guido van Rossum发明了一种面向对象的 ...

  6. Testlink1.9.17使用方法( 第三章 初始配置[配置用户、产品] ）

    第三章 初始配置(配置用户.产品) 一. 设置用户 QQ交流群:585499566 在TestLink系统中,每个用户都可以维护自己的私有信息.admin可以创建用户,但不能看到其它用户的密码.在用户 ...

  7. 第一章 初始C语言

    第一章 初始C语言 目录 第一章 初始C语言 1. C语言起源 2. 选择C语言的理由 2.1 设计特性 2.2 高效性 2.3 可移植性 2.4 强大而灵活 2.5 面向程序员 3. C语言的应用范 ...

  8. 大话ASP.NET开发(第一章 html5+css3+解耦问题的探讨)

    一.拉近我们的距离 我想,很多人会问,如今IE6还占据颇多份额的中国,html5.css3是否还很遥远?我会很直接告诉他们:其实就在你的眼前.我们来看两个图:                      ...

  9. 第一章: 初始JVM

    跟很多人一样,我一开始接触 Java 虚拟机只是因为面试需要用到,所以硬着头皮看看.所以很多人对于为什么要学虚拟机这个问题,他们的答案都是:因为面试. 因为装逼 但我经过了几年的学习和实战,我发现其实 ...

随机推荐

  1. java中方法的重载和覆盖

    java中方法的重载和覆盖 先来了解一下这两个名词的含义. 重载: 在一个类当中才可以重载,方法名相同,参数个数不同或参数个数相同而参数类型不同. 覆盖: 又称重写,在派生类(子类)中重写基类(父类) ...

  2. tomcat源码分析(一)- tomcat源码导入IDEA并正常启动

    项目导入 代码下载 打开GitHub网站:https://github.com/apache/tomcat 下载对应的zip包 解压对应的压缩包(当然你也可以用工具对其进行解压) unzip tomc ...

  3. .netcore Control调用View方法

    控制器代码如下: 视图代码如下: 完整项目代码参考网址:https://github.com/gamecc666/BackTipFrontProject 版权声明:本文为博主原创文章,如需转载,请标明 ...

  4. 【原创】Docker 搭建Maven私服nexus 3.17初始密码登录不上问题/admin登陆不上问题

    [原创-转载请说明出处] 博主最近在虚拟机中搭建Maven私服,遇到了一个关键问题就是nexus 3.17版本后初始密码不是admin/admin123. 对于nexus不熟悉的我弄了很长时间!!!心 ...

  5. HDU 3061：Battle（最大权闭合图）

    http://acm.hdu.edu.cn/showproblem.php?pid=3061 题意:中文题意. 思路:和上一题神似啊,比上一题还简单,重新看了遍论文让我对这个理解更加深了. 闭合图:如 ...

  6. 28nm工艺下，自动生成管脚排列文件，给设计加PAD，并在PAD上面打Label的流程（含Tcl脚本）

    本文转自:自己的微信公众号<数字集成电路设计及EDA教程> 里面主要讲解数字IC前端.后端.DFT.低功耗设计以及验证等相关知识,并且讲解了其中用到的各种EDA工具的教程. 考虑到微信公众 ...

  7. 小程序组件-swipe多页切换，并支持下拉刷新，上拉加载，menu动态联动切换

    前言 最近一个小程序项目中遇到一个需求,就是实现类似资讯类app的多页面切换的那种效果, 如下图: 最终效果: 1.功能分析 首先实现这个功能分为三步: 实现顶部menu菜单 实现多页面滑动切换 支持 ...

  8. windows美化工具7+ Taskbar Tweaker

    今天分享一个windows美化工具 7+ Taskbar Tweaker 调整工具专为 Windows 任务栏工作者量身定制,支持 Windows 7 以及更高版本的(非服务器版)微软操作系统平台. ...

  9. 解决Tomcat catalina.out 不断膨胀，导致磁盘占用过大的问题

    到服务器上看了一下任务中心的日志情况,膨胀的很快,必须采取措施限制其增长速度. 我们采用Cronlog组件对此进行日志切分,官网http://cronolog.org/一直未能打开,只能从其它地方寻找 ...

  10. springcloud-eureka客户端服务注册（含demo源码）

    1. 场景描述 前几天介绍了下springcloud的Eureka注册中心(springcloud-注册中心快速构建),今天结合springboot-web介绍下eureka客户端服务注册. 2. 解 ...