码迷,mamicode.com
首页 > Web开发 > 详细

CSS3

时间:2020-06-21 23:46:00      阅读:110      评论:0      收藏:0      [点我收藏+]

标签:type   基本   引擎   技术   xhtml   引用   级联   lin   速度   

什么是CSS

Cascading Style Sheet  级联样式表
表现HTML或XHTML文件样式的计算机语言:包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

CSS的优势

内容与表现分离
网页的表现统一,容易修改
丰富的样式,使得页面布局更加灵活
减少网页的代码量,增加网页的浏览速度,节省网络带宽
运用独立于页面的CSS,有利于网页被搜索引擎收录

选择器 { 声明1;
              声明2;
              ……  }


例如:h1 {
    font-size:12px;
    color:#F00;
}
CSS的最后一条声明后的“;”可写可不写,但是,基于W3C标准规范考虑,建议最后一条声明的结束“;” 都要写上


style标签:<style type="text/css">
            
                h1 {
                  font-size:12px;
                  color:#F00;
               }
          </style>

TML中引入CSS样式

行内样式:使用style属性引入CSS样式

<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>

内部样式表:

CSS代码写在<head>的<style>标签中

<style>
        h1{color: green; }
</style>

优点
方便在同页面中修改样式
缺点
不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底

外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表,有两种方式
链接式:

<head>
  ……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>

导入式

<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>

CSS样式优先级:行内样式>内部样式表>外部样式表
                               就近原则

CSS3基本选择器:标签选择器     类选择器    ID选择器

<标签名 class= "类名称">标签内容</标签名>

类选择器:.class { font-size:16px;}

ID选择器:#id { font-size:16px;}

小结

标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次

基本选择器的优先级:ID选择器>类选择器>标签选择器

 

CSS的高级选择器:层次选择器      结构伪类选择器    属性选择器

技术图片

 

 

后代选择器:body p{  background: red;  }

子选择器:body>p{  background: pink;  }

相邻兄弟选择器:.active+p {  background: green;  }

通用兄弟选择器:.active~p{  background: yellow;  }

结构伪类选择器

技术图片

 

 

ul li:first-child{ background: red;}
ul li:last-child{ background: green;}
p:nth-child(1){ background: yellow;}
p:nth-of-type(2){ background: blue;}

小结

使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点
 E F:nth-child(n)在父级里从一个元素开始查找,不分类型
E F:nth-of-type(n)在父级里先看类型,再看位置

 属性选择器

E[attr]属性选择器:a[id] { background: yellow; }

E[attr=val]属性选择器:a[id=first] { background: red; }

E[attr*=val]属性选择器:a[class*=links] { background: red; }

E[attr^=val]属性选择器: a[href^=http] { background: red; }

E[attr$=val]属性选择器:a[href$=png] { background: red; }

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

法:

CSS3

标签:type   基本   引擎   技术   xhtml   引用   级联   lin   速度   

原文地址:https://www.cnblogs.com/wufanfan/p/13174316.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!