CSS基础 |
您所在的位置：网站首页 › where是否遵循就近原则 › CSS基础 |
CSS基础
|
什么是CSS
1.Cascading Style Sheet 级联样式表 2.表现HTML 或 XHTML文件样式的计算机语 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定 CSS的发展史
1.内容与表现分离 2.网页的表现统一，容易修改 3.丰富的样式，使得页面布局更加灵活 4.减少网页的代码量，增加网页的浏览速度，节省网络带宽 5.运用独立于页面的CSS，有利于网页被搜索引擎收录 CSS基本语法结构语法 选择器 { 声明1; 声明2; } h1 { font-size:12px; color:#F00; }h1 font-size 12px font-size:12px; CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上 style标签 h1 { font-size:12px; color:#F00; } HTML中引入CSS样式1.行内样式 使用style属性引入CSS样式 style属性的应用 直接在HTML标签中设置的样式2.内部样式表 CSS代码写在< head>的< style>标签中 h1{color: green; }①.优点 方便在同页面中修改样式 ②.缺点 不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底 3.外部样式表 1.CSS代码保存在扩展名为.css的样式表中 2.HTML文件引用扩展名为.css的样式表，有两种方式 ①链接式 ②导入式 1.链接外部样式表 语法 href=“style.css” rel=“stylesheet” type=“text/css” 2.导入外部样式表 语法 @import url("style.css");链接式与导入式的区别 1.标签属于XHTML，@import是属于CSS2.1 2.使用链接的CSS文件先加载到网页当中，再进行编译显示 3.使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中 4.@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的 CSS样式优先级 1.行内样式>内部样式表>外部样式表 2.就近原则 CSS3基本选择器1.标签选择器 2.类选择器 3.ID选择器 1.标签选择器 HTML标签作为标签选择器的名称 < h1>…< h6>、< p>、< img/> 语法 h1 { font-size:12px; color:#F00; }h1 font-size 12px font-size:12px; 2.类选择器 语法 标签内容 .class { font-size:16px;}.class 类名称 font-size 属性 16px; 值 font-size:16px; 声明 3.ID选择器 语法 #id { font-size:16px;}”#“ id id名称 font-size 属性 16px 值 font-size:16px； 声明 小结 1.标签选择器直接应用于HTML标签 2.类选择器可在页面中多次使用 3.ID选择器在同一个页面中只能使用一次 基本选择器的优先级 ID选择器>类选择器>标签选择器 标签选择器是否也遵循“就近原则”？ 不遵循，无论是哪种方式引入CSS样式，一般都遵循ID选择器 >class类选择器 >标签选择器的优先级 CSS的高级选择器1.层次选择器 2.结构伪类选择器 3.属性选择器 1.层次选择器E F ------后代选择器 ------选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内 E>F ------子选择器 ------选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素 E+F ------相邻兄弟选择器 ------选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面 E~F ------通用兄弟选择器 ------选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 后代选择器 语法 body p{ background: red; }后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入 子选择器 语法 body>p{ background: pink; }相邻兄弟选择器 语法 .active+p { background: green; }通用兄弟选择器 语法 .active~p{ background: yellow; } 结构伪类选择器 使用CSS3结构伪类选择器 p1p2p3 li1li2li3 选择器功能描述E:first-child作为父元素的第一个子元素的元素EE:last-child作为父元素的最后一个子元素的元素EE F:nth-child(n)选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、oddE:first-of-type选择父元素内具有指定类型的第一个E元素E:last-of-type选择父元素内具有指定类型的最后一个E元素E F:nth-of-type(n)选择父元素内具有指定类型的第n个F元素 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)和EF:nth-of-type(n)的 关键点 EF:nth-child(n)在父级里从一个元素开始查找，不分类型 EF:nth-of-type(n)在父级里先看类型，再看位置 属性选择器 属性选择器功能描述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与属性值中的任意位置相匹配E[attr]属性选择器 语法 a[id] { background: yellow; }E[attr=val]属性选择器 语法 a[id=first] { background: red; }E[attr=val]属性选择器中，属性和属性值必须完全匹配才能被选中 E[attr=val]属性选择器* 语法 a[class*=links] { background: red; }E[attr^=val]属性选择器 语法 a[href^=http] { background: red; }E[attr$=val]属性选择器 语法 a[href$=png] { background: red; } |
【本文地址】
今日新闻 |
推荐新闻 |