国外小型网站,建筑工程招聘网站哪个好,深圳高端企业网站建设公司,软件开发公司排行1.1.2 CSS选择器 CSS 选择器最基本的有四种#xff1a;标签选择器、ID 选择器、类选择器、通用选择器。 【标签选择器】 一个完整的 HTML 页面由很多不同的标签组成#xff0c;而标签选择器#xff0c;则是决定哪些标签采用相应的 CSS 样式#xff0c;比如#xff0c;在 s…1.1.2 CSS选择器 CSS 选择器最基本的有四种标签选择器、ID 选择器、类选择器、通用选择器。 【标签选择器】 一个完整的 HTML 页面由很多不同的标签组成而标签选择器则是决定哪些标签采用相应的 CSS 样式比如在 style.css 文件中对 p 标签样式的声明如下 span stylefont-family:Microsoft YaHei;font-size:14px;p {/spanfont-size: 12px;background: #900;color: 090;
} 这么做会使页面中所有 p 标签的背景都是#900(红色)文字大小均是 12px颜色为#090(绿色)返在后期维护中如果想改发整个网站中 p 标签背景癿颜色叧需要修改background 属性就可以了就这么容易当然你也可以设置整个页面中所有的 div 的属性、a 链接的属性、span 的属性这么做方便是方便但是不够灵活如果页面中除了某个 p标签背景不是红色外其他的都是红色就不能用这种方法定义了。 【ID 选择器】 ID 选择器在某一个 HTML 页面中只能使用一次就像只有一个身仹证 (ID)一样不重复在页面中使用 ID 选择器更具有针对性如 先给某个HTML页面中的某个p标签起个ID代码如下 p idoneW3CFuns.com:打造中国 Web 前端开发人员最专业的贴心社区/p 在 CSS 中定义 ID 为 one 癿 p 标签的属性就需要用到“#” 代码如下 #one{font-size:12px;background:#900;color:090;
} 返样页面中癿某个 p 就会是 CSS 中定义的样式。 针对“页面中除了某个 p 标签背景不是红色外其他的都是红色的”情况我们就可以用 ID 选择器单独定义那个背景不为红色的 p 标签返样问题就解决了。 【类选择器】 这种选择器更容易理解了就是使页面中的某些标签(可以是不同的标签)具有相同的样式就像国庆某个方阵中肯定都是不同癿人却均穿红色衣服手中高举花环样式都是一样的如果想让这一类人都有共同的样式该怎样做呢~呵呵和 ID 选择器的用法类似只不过过把 id 换做 class如下 p classone此处为 p 标签内的文字/p 如果我还想让 div 标签也有相同的样式怎么办呢加上同样的 class 就可以了如下 div classone此处为 DIV 标签内的文字/div 返样页面中凡是加上 classone的标签样式都是一样的了~ CSS 定义的时候和 ID 选择器差不多只不过把#换成. 如下 .one{font-size:12px;background:#900;color:090;
} 补充一个标签可以有多个类选择器的值不同的值用空格分开如 div classone yellow left一个标签可以有多个类选择器的值/div 这样我们可以将多个样式用到同一个标签中当然也可以 ID 和 class 一块用 div idmy classone yellow leftID 和 class 可同时应用到同一个标签/div 【通用选择器】 到这里前三种基本的选择器说完了但是还需要给大家介终一个 CSS 选择器中功能最强大但是用的最少的一种选择器“通用选择器”就是“*”星号。 *{此处为 CSS 代码} 强大之处是因为他对整个网页中所有 HTML 标签进行样式定义这种功能类似“标签选择器” 覆盖的对象更加广泛是整个HTML 的所有标签功能是强大但是返样反而限制了它的灵活性。 对于通用选择器还有一个不得不提的用法就是为了保证作出的页面能够兼容多种浏览器所以要对 HTML 内的所有的标签进行重置会将下面癿代码加到 CSS 文件的最顶端 *{margin:0; padding:0;} 为什么要这么用呢因为每种浏览器都自带有 CSS 文件如果一个页面在浏览器加载页面后发现没有 CSS 文件那么浏览器就会自动调用它本身自带的 CSS 文件但是不同的浏觅器自带的 CSS 文件又都不一样对不同标签定义的样式不一样如果我们想要作出的页面能够在不同的浏览器显示出来的效果都是一样的那么我们就需要对 HTML 标签重置就是上面的代码了但是这样也有不好的地方因为 HTML4.01 中有 89 个标签所以相当于在页面加载 CSS 的时候先对这 89 个标签都加上了{margin:0; padding:0;}在这里我不建议大家这么做因为 89 个标签中需要重置的标签是很少数的没有必要将所有的标签都重置用到哪些标签就定义哪些标签如下: body,div,p,a,ul,li{margin:0; padding:0;} 如果还需要 dl、dt、dd 标签重置那就在上面加上就可以了如下: body,div,p,a,ul,li,dl,dt,dd{margin:0; padding:0;} 用到哪些就写哪些这点也可以看做衡量页面重构师制作页面水平的高低以及是否专业的一个方面。 【选择器的集体声明】 在我们使用选择器的时候有些标签样式是一样的或者某些标签都有共同的样式属性我们可以将这些标签集体声明不同的标签用“,”分开比如 h1,h2,h3,h4,h5,h6{color:#900;} 再举个例子无论什么样的选择器”标签选择器””ID 选择器””类选择器” 叧要是选择器叧要有公共的 CSS 代码就可以用“选择器的集体声明” 起到精简代码的作用有一段代码如下 #header{font-size:14px; background:#ccc;}
div{font-size:14px; width:960px;}
.blue{font-size:14px; color:#009;}
.h1{font-size:14px; font-weight:normal;} 我们就可以将上面的代码迕行精简把公共的 CSS 代码用选择器的集体声明提取出来有点类似小学的“提取公因式”似的如下 #header ,div ,.blue,h1{font-size:14px;}
#header{background:#ccc;}
div{width:960px;}
.blue{color:#009;}
.h1{font-weight:normal;} 这是选择器的集体声明的经典应用把共同的部分提取出来这样做的好处相同的部分共同定义不同的部分单独定义保证风格统一样式修改灵活这也是优化 CSS 代码癿一块要记住 【选择器的嵌套】 选择器也是可以嵌套的如 #div1 p a{color:#900;}/*意思是在 ID 为 div1 内的 p 标签内的链接 a 标签的文字颜色为红色*/ 返样的好处就是不需要在单独癿为 ID 为 div1 的标签内的 p 标签内的 a 标签单独定义class 选择器或者 ID 选择器CSS 代码不就少了嘛~同样也是 CSS 代码优化的一块。 转载于:https://www.cnblogs.com/Destiny-Gem/p/3795696.html
