初识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选择器  类选择器即<即标签名 class"类名称">标签内容</标签名>

   1)类选择器

.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) 层次选择器

       E F  后代选择器  选择匹配的F元素,且匹配的F元素被包含在匹配的E元素中

      E>F  子选择器   选择匹配的F元素,且匹配的F元素是匹配E元素的子元素

      E+F  相邻兄弟选择器  选择匹配的F元素,且匹配的F元素仅位于匹配的E元素后面

       E~F  通用兄弟选择器  选择匹配的F元素,且匹配的E元素后所有匹配的F元素

   通用兄弟选择器选中的是E元素相邻的后面兄弟元素下,是一个或多个元素;

    相邻兄弟选中的是与E元素仅挨的F元素,其中选中的仅是一个元素

8.结构伪类选择器

    E:first-child   作为父元素的第一个子元素的元素E

    E:last-child   作为父元素的最后一个子元素的元素E

    E F:nth-child(n)  选择父级元素E 的第n个元素F(n可以是1/2/3)关键字为even  odd

    E:first-of-type   选择父级元素具有指定类型的第一个E元素

    E:last-of-type   选择父级元素具有指定类型的最后一个E元素

    E F:nth-of-type(n)  选择父元素内具有指定类型的第n个F元素

    E F:nth-child(n)和 E F:nth-of-type(n)使用时记住以下关键点

    E F:nth-child(n)在父级里从第一个元素开始查找,不分类型

    E F:nth-of-type(n)在父级里先看类型再看位置

9.属性选择器

    E[attr]    相匹配具有属性attr的E元素

    E[attr=val]   选择匹配具有属性attr的E元素 并且属性值位val(其中Val区分大小写)

    E[attr^=val]   选择匹配元素E,且E元素定义了属性attr,其中属性值以val开头的任意字符串

    E[attr$=val]   选择匹配元素E,且E元素定义了属性attr,其中属性值以val结尾的任意字符串

    E[attr*=val]   选择匹配元素E,且E元素定义了属性attr,其中包含了"val"话句话说,字符串val与属性值中的任意位置相匹配

时间: 2024-10-27 17:02:23

初识CSS3的相关文章

CSS3 - 初识CSS3

.navdemo{ width:560px; height: 50px; font:bold 0/50px Arial; text-align:center; margin:40px auto 0; background: #f65f57; /*制作圆*/ border-radius:5px; /*制作导航立体风格*/ box-shadow:0 5px 5px 0px gray; } .navdemo a{ display: inline-block; -webkit-transition: a

第四章:初识CSS3

1.CSS规则由两部分构成,即选择器和声明器 声明必须放在{}中并且声明可以是一条或者多条 每条声明由一个属性和值构成,属性和值用冒号分开,每条语句用英文冒号分开 注意: css的最后一条声明,用以结束的";"可写可不写,但是基于W3c标准规范思考建议最后一条声明的结束":"都要写上 2.行内样式 直接在style属性设置css样式style属性提供了一种改变所有的HTML元素样式的通用方法 语法: <h1 style="color:red"

初识css3动画

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画初识</title> <style type="text/css"> *{ padding:0; margin: 0; } li,ul,a{ text-decoration: none; list-style: none;

初识 css3中counter属性

最近看到counter属性,好奇是做什么用的,于是去查了查. 1.简单介绍 counter是为css中插入计数器.[注明]在CSS2.1中counter()只能被使用在content属性上.关于浏览器兼容性可以看[这里] 2.counter的作用 实际上是代替了javascript作为一种计数器工具,在css中使用.元素出现了几次就默认增加多少对应值.增加值大小还可以由自己设置. 可以想象当我们设置好一次规矩之后,以后无论添加多少标签,计数工具自动帮我们算计数,不必手动输入那些值.而且这些不必借

初识CSS3之媒体查询(2015年05月31日)

一.什么是媒体查询 媒体查询是面向不同设备提供不同样式的一种实现方式,它可以为每种类型的用户提供最佳的体验,也是响应式设计的实现方式. 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大小的屏幕上提供一流的用户体验,答案是:采用响应式设计.响应式设计可以随所显示的屏幕大小而改变.实现响应式设计的主要方法是使用 CSS 媒体查询. 二.媒体查询规则 1.引

第1章 初识CSS3

什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主流浏览器chrome.safari.firefox.opera.甚至360都已经支持了CSS3大部分功能了,IE10以后也开始全面支持CSS3了. 在编写CSS3样式时,不同的浏览器可能需要不同的前缀.它表示该CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀还是少不了的. | 前缀 | 浏览器 |

使用HTML5和CSS3开发电子商务网站——复习

目录: 第一章:HTML5基础 1.1 HTML5文件的基本结构和W3C标准 1.2 网页的基本标签 1.3 图像标签 1.4 超链接标签 第二章:列表.表格与媒体元素 2.1 列表 2.2 表格 2.3 HTML5的媒体元素 2.4 HTML5的结构元素 2.5 <iframe>框架 第三章:表单 3.1 表单概述 3.2 表单的高级应用 3.3 表单的初级验证 第四章:初识CSS3 4.1 CSS概述 4.2 CSS3的基本语法 4.3 在HTML中引入CSS样式 4.4 CSS3的选择器

7.30.2014 CSS初识

今天初识css3看来JQuery高级编程要放到最后去看了.笔记:     a:link    {color:blue;} 未访问     a:visited {color:blue;} 已访问     a:hover   {color:red;}   悬浮     a:active  {color:yellow;}活动链接 css代码格式     p{          css属性:属性值         } border-radius:xxpx;(边框圆角)    padding-(top,l

十天精通CSS3

课程地址:http://www.imooc.com/learn/33 第1章 初识CSS3 CSS3课程列出第一站,先带领大家进入CSS3的世界,探索CSS3的魅力!你做好准备了吗? 第2章 边框 本课程主要讲解border-color .border-image .border-radius 及box-shadow 相关知识 第3章 颜色相关 学习CSS3中与颜色有关的属性,包括RGBA colors和Gradient,来实现在此之前只能通过其它手段如背景图片才能得到的绚丽效果. 第4章 文字