CSS

xiaoxiao2021-03-01  14

目标 掌握 CSS 选择器 掌握使用 CSS 选择器修饰页面细节 了解 CSS 层(盒状模型)的概念 了解 CSS 3新特性 1、掌握 CSS 选择器 在一个网页中有很多的HTML标签,如果想对某个标签的内容 进行样式修饰,必须先从众多标签中找到它。 CSS 语法,为我们提供了非常方便的语法来选中具体的某个 标签----CSS 选择器 基本选择器(3种): 标签(元素Element)选择器:一般给多个相同的标签设置样式 <p>aaa</p> p{ /* 里面的样式代码对 aaa 生效 */ } ------------------ 类别(伪类)选择器:同时选中多个标签,这些标签可以人为 对他们进行分类。 <p class="ff">aaaaaa</p> <div class="ff">bbbb</div> <a class="ff">vcvccccc</a> .ff{ /* 对网页中所有有 class=ff 属性的标签生效 */ } ------------------ ID 选择器:一次只选中唯一具有该 id 名称的标签 <p id="aa">asdfasd</p> <a id="bb">asdfasdf</a> #aa{ /* 在整个页面中,只能选中一个 id="aa" 的标签 */ } ------------------ 复合选择器(灵活组合三种基本选择器): 交集选择器:同时满足两个条件的选择器 <p class="aa">dfasdfasd</p> <div class="aa">asdfasdf</div> div{} .aa{} ====> div .aa{} div >.aa{} 并集选择器:同时选中多个,这多个标签都有相同的样式 <p>asdfsdfd</p> <p class="aa">dfasdfasd</p> <div class="aa">asdfasdf</div> <span>cccc</span> <div>asdfasdf</div> p,div .aa,span{} 嵌套(后代)选择器: <p>asdfsdfd</p> <span>adfasdf</span> <div>sdfsdf</div> <div class="aa">asdfasdf <p class="aa">dfasd <span>cccc</span> fasd</p> <p class="bb">dfasdasd</p> </div> /* 先确定最外层的标签,逐步往所要找的标签靠近 */ div .aa p .aa span{} ------------------------------ 专门针对链接 <a > 标签制定了一个特殊选择器 a{} Element 选择器 链接标签,本身自带有一些鼠标事件:鼠标移动、覆盖、 点击、移出、访问后 a:link{/* 默认情况,没有做任何鼠标动作时的样式 */} a:visited{/* 鼠标点击以后的样式 */} a:hover{/* 鼠标移动到链接上的样式 */} a:active{/* 鼠标单击时的样式 */} 注意:当多个基本选择器同时对某个标签的属性进行修饰时, ID 选择器优先级最高、类别选择器次之、标签选择器最低 CSS 代码与 HTML 代码分离: (1)行内引入,不推荐 <p style="css 代码">ssss</p> (2)内嵌引入,部分推荐 <head> <style type="text/css">CSS 代码</style> </head> (3)外部导入,所有 css 代码独立在 *.css 文件中, 不推荐 <head> <style type="text/css"> @import "css/style.css" </style> </head> (4)外部链接,CSS代码全部在 style.css 文件中,推荐使用 <head> <link href="css/style.css" rel='stylesheet' type='text/css'> </head> 在编写外部的样式文件时,考虑代码重用,一般都会把 修改不同内容的样式进行分离。 修饰整个页面边框布局的样式 layout.css 修饰整个页面所有字体的样式 font.css 修改整个页面背景等内容的样式 main.css 修改整个页面中所有图片的样式 img.css ......... 修改页面打印时所需要的样式 print.css <link rel="shortcut icon" href="http://www.126.com/favicon.ico" /> <link id="setSkin" type="text/css" rel="stylesheet" href="http://img2.cache.netease.com/www/v2011/css/theme_blue1227.css" /> 在使用各种方式导入样式的时候,离内容最近的样式,优先级最高 行内引入-->内嵌-->外部导入-->外部链接 2、掌握使用 CSS 选择器修饰页面细节 在设计一个页面之前,需要全局的考虑,如:主体颜色、风格、 布局等内容。 1 可以先使用 Excel 进行页面布局设计 2 然后使用 HTML 中的 <div>标签来大体标记这些布局 3 最后使用 CSS 样式给每个矩形的布局块进行位置、高宽、颜色等的设置 3、了解 CSS 层(盒状模型)的概念 在 CSS 中,把页面看做由多个矩形块搭建而成。 在 CSS 中一般对 div 层标签,附加了内容、内边距、边框、 外边距 四个属性。 内容:width height 内边距:padding padding-top padding-left padding-right padding-button padding:10px 2px 50px 20xp; padding:10px 20px 10px 20xp; ==>padding:10px 20px; padding:10px; 边框:border top left right button style(实线、虚线、双线、浮雕线) 外边距:margin 设置盒状模型四边的顺序:顺时针方式,上右下左。 -------------------------- CSS 的定位: 默认的所有的 div 按照编写的代码顺序有各自的位置, 每个 div ,默认占据一整行。 可以使用属性 position 对一个 div 块进行定位 绝对定位:以浏览器左上角原点为起点定位,当一个元素 使用绝对定位时,原来他在页面中的位置就消失。 相对定位: 浮动定位: 4、了解 CSS 3新特性 CSS 开发工具 Rapid CSS 2008 绿色软件
转载请注明原文地址: https://www.6miu.com/read-3350093.html

最新回复(0)