河北省建设信息中心网站,企业邮箱注册申请免费注册官网,html5手机网站整套模板,做移动网站快速排名软件CSS基础之语法
介绍
CSS#xff08;层叠样式表#xff09;是一门用来设计网页样式的语言#xff0c;如网页的布局、字体、颜色搭配、视觉特效。作为WEB开发的基础技术之一#xff0c;掌握CSS的语法和API对于我们构建丰富的网页是必须的。
基础语法
stylediv …CSS基础之语法
介绍
CSS层叠样式表是一门用来设计网页样式的语言如网页的布局、字体、颜色搭配、视觉特效。作为WEB开发的基础技术之一掌握CSS的语法和API对于我们构建丰富的网页是必须的。
基础语法
stylediv {border: 5px red;}p,span {color: black;}.container {border: 5px red;}
/style语法由一个选择器起头它决定了将我们的样式添加到那些HTML元素上。接着是 {} 在两个大括号中间可以定义多个 属性:值; 对不同的属性有不同的合法值。
div styleborder: 5px red;/div行内样式是指将 属性:值; 写在HTML元素的 style 属性中的样式。
link relstylesheet hrefstyles.css通过 link 标签可以不必将CSS内容和HTML内容写在同一个文件中而是存放到不同文件这样不仅使代码更简洁在需要的情况下我们可以将CSS拆分到不同的CSS文件中在加载时按需加载。
选择器
在基础语法小节我们看到选择器是CSS规则的第一部分它告诉浏览器哪个HTML元素应该被选中应用样式。选择器有很多种它们可以单独使用也可以组合使用还支持一定的表达式。
html langen-US prefixog: https://ogp.me/ns#headmeta charsetutf-8/meta propertyog:locale contentzh-CN/titleCSS基础语法/titlestyle/* 类型选择器 */div {border: 2px black solid;}/* 分组选择器div或span元素 */div,span{border: 2px black solid;}/* 类选择器 */.container{border: 2px red solid;}/* ID选择器 */#key{border: 2px yellow solid;}/* 标签属性选择器 */div[align]{border: 2px yellowgreen solid;}/* 标签属性值选择器 */div[alignleft]{border: 2px darkorange solid;}/style/headbodydiv1.类型选择器/divdiv classcontainer2.类选择器/divdiv idkey3.ID选择器/divdiv aligncenter4.标签属性选择器/divdiv alignleft5.标签属性值选择器/div/body
/html代码片段展示了几种基础的选择器。
html langen-US prefixog: https://ogp.me/ns#headmeta charsetutf-8/meta propertyog:locale contentzh-CN/titleCSS基础语法/titlestyle/* 后代选择器 */div span {color: red;}/* 子代选择器 */div span {color: antiquewhite;}/* 相邻选择器 */h1 p {color:aqua;}/* 同辈选择器 */h2 ~ p {color:brown;}/* 关系选择器组合 */div article h2 ~ p {color:chartreuse;}/style/headbodydivpspan1.后代选择器/span/p/divdivspan2.子代选择器/span/divarticleh1滕王阁序/h1p3.豫章故郡洪都新府。/p/articlearticleh2静夜思/h2p4.床前明月光疑是地上霜。/pp4.举头望明月抵扣思故乡。/p/articledivarticleh2静夜思/h2p5.床前明月光疑是地上霜。/pp5.举头望明月抵扣思故乡。/p/article/div/body
/html关系选择器提供了一种与文档位置相关的关联逻辑通过这套逻辑可以按后代、子代、相邻、同辈等关系指定样式。
html langen-US prefixog: https://ogp.me/ns#headmeta charsetutf-8/meta propertyog:locale contentzh-CN/titleCSS基础语法/titlestyle/* 组合1 */div article h2 p {color:chartreuse;}/* 组合2 */div article h2 ~ p[k] {color:darkgreen;}/* 组合3 */div article h2 ~ .css {color:red;}/style/headbodydivarticleh2滕王阁序/h2p1.豫章故郡洪都新府。/pp classcss1.星分翼轸地接衡庐。/pp kd2.襟三江而带五湖控蛮荆而引瓯越。/p/article/div/body
/html各种选择器可以任意组合使用。
理解继承
像字体的样式我们在指定之后不想每个后代元素都指定一边而是希望他们与它的父元素保持一直这种特性CSS是支持的。
理解继承
html langen-US prefixog: https://ogp.me/ns#headmeta charsetutf-8/meta propertyog:locale contentzh-CN/title理解继承/titlestyle#human{color: red;font-size: 10px;}.bjy{color: yellowgreen;}/style/headbodydiv idhumanp李白/pp classbjy白居易/p/div/body
/html“李白”显示红色是因为 p 元素的 color 元素继承自父容器 div 。“白居易”显示黄绿色是因为类样式中的 color 覆盖了从父容器那继承的属性值。并不是所有属性都会被继承例如width、margin、padding 和 border。
控制继承
为了控制继承行为CSS提供了5个特殊的属性值所有的CSS属性都可以接收这些值。
inherit设置属性值与父元素相同开启继承。initial设置为属性的初始值。unset如果属性有从父元素继承的值则设置为该值否则重置为初始值。revert类似与unset不同的是将重置为浏览器的默认样式而不是改属性的默认值。revert-layer重置为上一个级联层layer中建立的值。
控制所有属性的继承
html langen-US prefixog: https://ogp.me/ns#headmeta charsetutf-8/meta propertyog:locale contentzh-CN/title理解继承/titlestylediv{color: red;font-size: 10px;}.name{/* 当我们有很多属性并且它们的继承行为是一致的时候可以使用all来简写这种行为 */all: initial;}/style/headbodydivp李白/pp classname白居易/p/div/body
/html理解层叠
你是否会有疑惑当不同的选择器针对某个HTML设置了不同的背景颜色浏览器会以那个为准在实际工作中有时你会发现明明书写了CSS规则但是HTML元素的样式就是不变。接下来我们来学习下浏览器是怎么解决CSS规则冲突的。
CSS是Cascading Style Sheets的简写理解第一个词层叠cascade很重要。层叠可以理解成一个元素 p 的 color 属性值有多个来源进而发生冲突的现象也可以理解是解决这种冲突的手段。有三个因素决定了浏览器应用那个CSS规则到元素上将它们按重要性排序分别是资源顺序、优先级、重要程度。
资源顺序
html langen-US prefixog: https://ogp.me/ns#headmeta charsetutf-8/meta propertyog:locale contentzh-CN/title理解继承/titlestylep{color: red;}p{color: yellowgreen;}/style/headbodydiv idhumanp李白/pp白居易/pp stylecolor: aqua;color:black;王浩然/p/div/body
/html当样式的优先级相同时在后面的规则会覆盖前面的规则。
优先级
选择器的优先级有三部分组成 {id}.{类}.{元素}每个部分都会计算出一个分值这些分值就是选择器的权重。在比较权重时会先比较 {id} 部分相等时比较 {类} 部分还相等则比较 {元素} 部分。优先级的计算如下表所示
选择器ID类元素优先级h1{ 规则内容 }0010-0-1h1 p::first-letter{ 规则内容 }0030-0-3li a[href*en-US] .inline-warning{ 规则内容 }0220-2-2#identifier{ 规则内容 }1001-0-0button:not(#mainBtn, .cta){ 规则内容 }1011-0-1
html langen-US prefixog: https://ogp.me/ns#headmeta charsetutf-8/meta propertyog:locale contentzh-CN/title理解继承/titlestyle/* 2-0-0 */#human #bjy{color: red;}/* 1-0-0 */#bjy{color: yellowgreen;}/* 0-0-1 */div{color: blue;}/* 0-0-2 */div span{color: chartreuse;}/* 1-0-1 */div #bjy2{color:cadetblue;}/style/headbodydiv idhumanp idbjy白居易/p/divdivspan李白/spanspan idbjy2白居易/span/div/body
/html内联样式优先于所有普通样式内联样式的权重分值可以理解是 1-0-0-0即无论有多少ID选择器内联样式的优先级都是最高的。
!important
关键词 !important 会忽略优先级强制生效。覆盖!important 的唯一办法就是有另一个更高优先级或者相同优先级且顺序靠后的!important 。
4· -html langen-US prefixog: https://ogp.me/ns# headmeta charsetutf-8/meta propertyog:locale contentzh-CN/title!important/titlestyle/* 1-0-0 */#lb,#bjy{color: red;}/* 0-0-1 */p{color: yellowgreen !important;}/style/headbodyp idlb李白/pp idbjy stylecolor: yellow !important;白居易/p/body
/html在编写我们的样式代码时最好不要使用!important因为它改变了层叠的默认行为会增加我们排查样式问题的难度。尤其是在大型样式表中当你想覆盖UI框架样式时。
