初识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与属性值中的任意位置相匹配

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏SDNLAB

Open vSwitch系列之数据结构解析深入分析Hmap

作为Open vSwitch系列的第一篇文章,选择分析哪个数据结构我思考很久,最后还是选择比较常见而且很基础的结构hmap。 在Open vSwitch世界中很...

3294
来自专栏java一日一条

如何防止单例模式被JAVA反射攻击

单例模式相信大家都知道,用过的人不在少数。之前写过一篇博文《singleton模式四种线程安全的实现》(参见:http://blog.csdn.NET/u013...

661
来自专栏企鹅号快讯

Python中的while循环

原创第13篇~while循环 阅读本文大概15分钟。 文章‍结构: while定义 普通while练习 while和input函数 while 和 else w...

2166
来自专栏有趣的Python

8-Java基础语法-Java方法

类,Scanner是一个类,sc是它实例化出的对象。nextInt()是从键盘获取一个整型值的方法,next()是从键盘获取一个字符串类型值的方法。这两个都是使...

311
来自专栏web前端

Vuejs --03 模板语法

一、插值      1、文本 <span>{{msg}}</span> //mustache语法 <span v-once>{{msg}}</spa...

1739
来自专栏阮一峰的网络日志

图解 Monad

函数式编程有一个重要概念,叫做Monad。 ? 网上有很多解释(这里和这里),但都很抽象,不容易看懂。我尝试了好多次,还是不明白Monad到底是什么。 ? 昨天...

3174
来自专栏小小挖掘机

举一反三-Pandas实现Hive中的窗口函数

1、Hive窗口函数 我们先来介绍一下Hive中几个常见的窗口函数,row_number(),lag()和lead()。 row_number() 该函数的格式...

3176
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第二天 HTML表单&amp;CSS【悟空教程】

所有的html标签中,表单标签是最重要的。在实际开发中,最经典的实例就是用户注册,覆盖了表单标签的所有的元素。效果图如下:

924
来自专栏yl 成长笔记

深刻理解反射(Reflection)

最近公司在搞自动化测试,由于版权问题,无法用 ’录制脚本‘ 进行,也就没法用 VS 自带的 UITest 框架(蛋疼), 所以只能开源的 FlaUI 框架来搞了...

874
来自专栏偏前端工程师的驿站

CSS魔法堂:选择器及其优先级

一、前言                               首先看看一道阿里这期网申的题目吧! 1.找出下面优先级相同的选择器   A. im...

1976

扫描关注云+社区