前端内容梳理(2)CSS和CSS3

1、CSS

(1)CSS简介

(2)定义样式:选择器,以及一条或多条声明

(3)CSS的引入方式和书写规范

(3.1)内嵌样式

内嵌样式是把css的代码嵌入到html标签中

<div style="color:red;font-size: 100px;">你好啊 小朋友</div>

不建议使用

(3.2)内部样式

在head标签中使用style标签进行css的引入

<style type="text/css">

div{color:red;font-size: 100px;}

</style>

(3.3)外部样式

将css样式抽取成一个单独css文件 谁去使用谁就引用

<link rel="stylesheet" type="text/css" href="demo1.css"/>

(3.4)@import方式

<style type="text/css">

@import url("css地址");

</style>

link与@import方式的区别:

(1)link所有浏览器都支持 import部分低版本IE不支持

(2)import方式是等待html加载完毕之后在加载

(3)import方式不支持js的动态修改

(3)CSS中样式的继承

body {font-family: Verdana, sans-serif;}

根据上面这条规则,站点的 body 元素将使用 Verdana 字体(假如访问者的系统中存在该字体的话)。通过 CSS 继承,子元

素将继承最高级元素(在本例中是 body)所拥有的属性(这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd)。不需要另外的规

则,所有 body 的子元素都应该显示 Verdana 字体,子元素的子元素也一样。

有些浏览器不支持继承:可以通过使用我们称为 "Be Kind to Netscape 4" 的冗余法则来处理旧式浏览器无法理解继承的问题

如果你不希望 "Verdana, sans-serif" 字体被子元素p继承,可以针对 p 的特殊规则,这样它就会摆脱父元素的规则。

(4)常用的选择器

元素选择器;id选择器;class选择器;(选择器的优先级:id>class>元素

属性选择器:对带有指定属性的 HTML 元素设置样式;http://www.w3school.com.cn/css/css_syntax_attribute_selector.asp

派生选择器:http://www.w3school.com.cn/css/css_syntax_descendant_selector.asp

(5)CSS伪类和伪元素

http://www.w3school.com.cn/css/css_pseudo_classes.asp

http://www.w3school.com.cn/css/css_pseudo_elements.asp

(6)CSS框模型和定位

(6.1)外边距合并问题:http://www.w3school.com.cn/css/css_margin_collapsing.asp

(6.2)定位:http://www.w3school.com.cn/css/css_positioning.asp

(7)CSS样式分类

http://www.w3school.com.cn/css/css_background.asp

2、CSS3

(1)CSS3 是最新的 CSS 标准。

(2)新的边框属性:http://www.w3school.com.cn/css3/css3_border.asp

(3)新的背景属性:http://www.w3school.com.cn/css3/css3_background.asp

(4)新的文本属性:http://www.w3school.com.cn/css3/css3_text_effect.asp

(5)@font-face 定义“自己的”字体 :http://www.w3school.com.cn/css3/css3_font.asp

(6)2D和3D转换 对元素进行移动、缩放、转动、拉长或拉伸:http://www.w3school.com.cn/css3/css3_2dtransform.asp

(7)CSS3 过渡和CSS3 动画:http://www.w3school.com.cn/css3/css3_transition.asp

(8)CSS3 多列 http://www.w3school.com.cn/css3/css3_multiple_columns.asp

(9)新的用户界面属性 http://www.w3school.com.cn/css3/css3_user_interface.asp

 

猜你喜欢

转载自blog.csdn.net/Carl_changxin/article/details/83089214
今日推荐