css样式 | 易学教程

CSS选择器

阅读更多关于 CSS选择器

一、简单选择器 1.通用选择器：*{} 2.元素选择器：元素{} 3.id选择器 4.类选择器 5.群组选择器：选择器1，2，...n{} 6.后代选择器：选择器1 选择器2...{} 7.子代选择器：选择器1>选择器2...{} 8.伪类选择器：①:link 未访问时；②:visited 访问后；③:hover 鼠标悬停；④:active 元素激活状态下；⑤:focus 获得焦点时；二、复杂选择器 1.兄弟选择器 ①相邻兄弟选择器：选择器1+选择器2：获取紧挨在选择器1后的兄弟元素 ②.通用兄弟选择器：选择器~选择器：获取元素后面所有符合条件的兄弟元素 2.属性选择器： ①[attr]{} ②[attr1][attr2]{} ③[attr=value]{} ④elem[attr=value]{} ⑤elem[attr1][attr2]{} ⑥[attr^=value]{}——开头 ⑦[attr$=value]{}——结尾 ⑧[attr*=value]{}——含有 ⑨[attr~=value]{}——含有value这个单词的元素（前后空格） 3.伪类选择器 ①目标伪类：:target{} 锚点被激活时，让锚点元素应用的样式 ②结构伪类：:first-child{} 找大哥 :last-child{}找小弟 :nth-child(n) ③:empty：找内部无任何元素的标签，文本

CSS简写方式

阅读更多关于 CSS简写方式

1.边框的简写 border-color: 颜色 border-style:样式**solid**/dotted(点点)/dushed(短线)/double(双实线) border-width:宽度简写:**border:color style width** 最简写方式:**border:style** <br> 2 边框阴影 box-shadow:0px 0px 0px 0px 000 inset/outset; 值1：h-shadow---水平方向的阴影偏移（阴影左右移动）值2：v-shadow---垂直方向的阴影偏移（阴影上下移动）值3：blur---阴影模糊距离（越大越淡）值4：cspread---阴影尺寸（阴影大小）值5：color---阴影颜色，默认黑色值6：内阴影或者外阴影（默认） **最简写：box-shadow:h-shadow v-shadow** 3 背景 1 背景颜色：background-color 2 背景图片：background-image:url(图片路径)---双引号可加可不加 3 背景图片平铺：background-repeat:repeat(默认)/no-repeat/repeat-x/repeat-y 4 背景图片定位：background-position:①px(v1-一起设置x，y轴；v1 v2 分别设置x轴y轴)；②%

迷你MVVM框架 avalonjs 学习教程10、样式操作

阅读更多关于迷你MVVM框架 avalonjs 学习教程10、样式操作

一般情况下我们通过设置类名就可以改变元素的样式，但涉及到动画部分，就一定需要设置内联样式了，因此有了 ms-css 。* ms-css *的用法为 ms-css-样式名="样式值" ，如ms-css-width=”prop”(会自动补px)，ms-css-height=”{{prop}}%”, ms-css-color=”prop”, ms-css-background-color=”prop”, ms-css-font-size=”{{prop}}px”。细细联想，ms-css与ms-class的旧风格、ms-data、ms-attr的用法相仿，属性名接第三个参数作为name，属性值作为value。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <script src="avalon.js"></script> <script> var model = avalon.define({ $id: "test", background: "red" }) model.$watch("background", function(v) { model.background = v }) </script> </head> <body>

Css常用属性（背景，字体，div盒子等）

阅读更多关于 Css常用属性（背景，字体，div盒子等）

Css常用属性（背景，字体，div盒子等） 1.背景 1.背景颜色：background-color 2.将图像设置为背景:background-image:url(); 3.设置图像是否平铺：background-repeat：no-repeat 或 repeat-x 或repeat-y 4.设置背景图片是否随滚动条一起移动：background-attachment:fixed;固定住。 inherit：规定应该从父元素继承 background-attachment 属性的设置。默认属性scroll 5. background ：背景色背景图片平铺方式 background-color : red ; background-image : url(../img/logo.gif) ; background-repeat : no-repeat ; background-attachment : fixed ; background : #c9c9dd url(../img/logo.gif) no-repeat ; 2.字体 1.字体是否倾斜：font-style：normal(默认值)；italic或oblique显示倾斜字体；inherit规定应该从父元素继承字体样式。 2. 加粗：font-weight:normal(默认值);bold 定义粗体字符；bolder

css已经设置样式了之后，如height：100px，想要清除这个样式，让其没有这个样式

阅读更多关于 css已经设置样式了之后，如height：100px，想要清除这个样式，让其没有这个样式

height：unset；如果CSS关键字 unset 从其父级继承，则将该属性重新设置为继承的值，如果没有继承父级样式，则将该属性重新设置为初始值。换句话说，在第一种情况下（继承属性）它的行为类似于 inherit ，在第二种情况下（非继承属性）类似于 initial 。它可以应用于任何CSS属性，包括CSS简写属性 all 。来源： https://www.cnblogs.com/yangyuzhuo/p/12453903.html

[原]《Web前端开发修炼之道》-读书笔记CSS部分

阅读更多关于 [原]《Web前端开发修炼之道》-读书笔记CSS部分

如何组织CSS-分层应用 css 的能力分两部分：一部分是css的API，重点是如何用css控制页面内元素的样式；另一部分是css框架，重点是如何对 css 进行组织。如何组织 css 可以有多种角度，例如按功能划分，或者按区块划分。这里讲一下 base.css + common.css + page.css 的组织方法。将网站内的所有样式，按照职能分成三大类：base、common、page，这三者是层叠结构。 1、base 层-精简通用位于三者的最底层，提供 css reset 功能和粒度最小的通用类——原子类。这一层会被所有页面引用，是页面样式所需依赖的最底层，不同风格的网站可以使用同一个 base 层，所以，应具有高度可移植性，力求精简和通用。该层相对稳定，基本不需要维护，可以简单地放在一个文件里，如 base.css。 css reset 即一开始就将浏览器的默认样式全部去掉，就是通过重新定义标签的样式，“覆盖”掉浏览器提供的默认样式。可以将常用的标签显式地罗列出来，避免使用“*”，如来自于 YUI 的部分 css reset 的代码： /*CSS reset*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin

优化提高CSS性能的方法有哪些？

阅读更多关于优化提高CSS性能的方法有哪些？

避免过度约束避免后代选择符避免链式选择符使用紧凑的语法避免不必要的命名空间避免不必要的重复最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么避免！important，可以选择其他选择器尽可能的精简规则，你可以合并不同类里的重复规则修复解析错误避免使用多类选择符移除空的css规则正确使用display的属性：由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。 display:inline后不应该再使用width、height、margin、padding以及float。 display:inline-block后不应该再使用float。 display:block后不应该再使用vertical-align。 display:table-*后不应该再使用margin或者float。不滥用浮动：虽然浮动不可避免，但不可否认很多css bug是由于浮动而引起。不滥用web字体对于中文网站来说Web Fonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。不声明过多的font-size：这是设计层面的问题，设计精良的页面不会有过多的font-size声明。不在选择符中使用ID标识符，主要考虑到样式重用性以及与页面的耦合性。不给h1

使用jquery操作元素的css样式（获取、修改）

阅读更多关于使用jquery操作元素的css样式（获取、修改）

使用jquery操作元素的css样式（获取、修改） //1、获取和设置样式 $ ( "#tow" ) . attr ( "class" ) 获取 ID 为tow的 class 属性 $ ( "#two" ) . attr ( "width" , "100" ) 设置Id为two的width属性。 //2、追加样式 $ ( "#two" ) . addClass ( "divClass2" ) 为 ID 为two的对象追加样式divClass2 //3、移除样式 $ ( "#two" ) . removeClass ( "divClass" ) 移除 ID 为two的对象的 class 名为divClass的样式。 $ ( #two ) . removeClass ( "divClass divClass2" ) 移除多个样式。 //4、切换类名 $ ( "#two" ) . toggleClass ( "anotherClass" ) //重复切换anotherClass样式 //5、判断是否含有某项样式 //hasClass 检查当前的元素是否含有某个特定的类(只是class)，如果有，则返回true $ ( "#two" ) . hasClass ( "another" ) == $ ( "#two" ) . is ( ".another" ) ; hasClass ( )

css 样式重置移动端适配

阅读更多关于 css 样式重置移动端适配

css默认样式重置 @charset "utf-8"; *{margin:0;padding:0;} img {border:none; display:block;} em,i{ font-style:normal;} body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, font { padding: 0; margin: 0; font-family:"微软雅黑"; } table { border-collapse: collapse; border-spacing: 0;} h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 100%; } ol, ul, li, dl, dt, dd { list-style: none; } input, button, textarea, checkbox, select, radio, form { vertical-align: top; } a{ color: #000; text-decoration: none; } a:link, a:visited { text

CSS笔记

阅读更多关于 CSS笔记

极客CSS笔记基础语法: selector选择器{ property属性:value值 } 例： h1{ color:red; font-size:18px } 　　高级语法：选择器分组： h1, h2, h3, h4, h5, h6 { color : red; } 继承：在最外层的元素添加样式，若里层元素没有样式，则套用该样式 body{ color:green; } CSS选择器：派生选择器: 通过依据元素在其位置的上下文关系来定义样式。例：li strong{}，中间用空格隔开 id选择器：以#号来定义，常用方式是id选择器常常用于建立派生选择器。例：#pid a{} 类选择器：以 . 点号来表示，也可以用作派生选择器属性选择器：对带有指定属性的HTML元素设置样式，属性和值选择器。例：[title]{} 或 [title=t]{} 子元素选择器： element > element。例 <div> > <p> ，选择父元素为div的所有p元素兄弟选择器： element + element。例 <div> + <p> ，选择紧接着div元素之后的所有p元素 CSS样式： CSS背景属性描述 background－attachment 背景图像是否固定或者随着页面的其余部分滚动 background－color 设置元素的背景颜色

订阅 css样式