css包含各种选择符,如:id选择符、类选择符,该怎么用,要注意什么?

html-css019

css包含各种选择符,如:id选择符、类选择符,该怎么用,要注意什么?,第1张

CSS 中 id、class属性的区别 \x0d\x0a1)class是设置标签的类,用于指定元素属于何种样式的类。在CSS样式中以小写的“点”及“.”来命名,在html页面里则以class="css5" 来选择调用,命名好的CSS又叫css选择器。\x0d\x0a如: .css5{属性:属性值} 选择器在html调用为“我是class例子\x0d\x0a.baobao { color: limebackground: #ff80c0 }\x0d\x0a使用方法:class="baobao" \x0d\x0a\x0d\x0a2)id是设置标签的标识。用于定义一个元素的独特的样式。在CSS样式定义的时候 以“#”来开头命名id名称\x0d\x0a如一个CSS规则:\x0d\x0a  #binbin { font-size: larger }\x0d\x0a 使用方法:id="binbin" \x0d\x0aid是一个标签,用于区分不同的结构和内容,就象你的名字,如果一个屋子有2个人同名,就会出现混淆;\x0d\x0a\x0d\x0a3)css里的id用法与class用法一样,只是把class换成id。如例子:\x0d\x0a在CSS样式定义ID \x0d\x0a #css5 {height:25pxwidth: 200px}\x0d\x0a 调用ID :\x0d\x0a我是ID例子\x0d\x0aclass是一个样式,可以套在任何结构和内容上,就象一件衣服。\x0d\x0a\x0d\x0a4)概念上说就是不一样\x0d\x0aid是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。\x0d\x0a(1)\x0d\x0a \x0d\x0a一个class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本:一个class可以定义剧本中每个人物的故事线,你可\x0d\x0a以通过cSS,javascript等来使用这个类。因此你可以在一个页面上使用class="Frodo" ,class= "Gandalf", \x0d\x0aclass="Aragorn"来区分不同的故事线。还有一点非常重要的是你可以在一个文档中使用任意次数的class。\x0d\x0a(2) id 通\x0d\x0a常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时(比如说通常一个页面都是由一个页眉,一个报头,一个内容区域和一个页脚等组成),一般使用ID比较理想,因为一个ID在一个文档中只能被使用一次。而这些元素在同一页面中很\x0d\x0a少会出现大于一次的情况。\x0d\x0a归纳成一句话就是:class可以反复使用而id在一个页面中仅能被使用一次。\x0d\x0a\x0d\x0a有可能在很大部分浏览器中反复使用同一个id不会出现问题,但在标准上这绝对是错误的使用,而且很可能导致某些浏览器的现实问题。\x0d\x0a在实际应用的时候,class可能对文字的排版等比较有用,而id则对宏观布局和设计放置各种元素较有用。> 回答于 2022-11-16

要注意整体布局;

链接样式;(当用css定义链接的各种状态时,要注意书写的顺序)

伪类和选择符的配合使用;(将伪类和类组合起来用,就可以在同一个页面中做几组不同的链接效果了)

所有样式名全都小写尽量用英文为保证日后能一目了然,尽量不缩写;

一些代码的使用方试;

浮动:float((1、对于内部全为浮动的元素,记得清除浮动。2、元素内部的子元素尽量不要全部浮动,最好保留最边上的一个设置margin,这样便不会出现因浏览器窗口缩放导致的浮动元素被挤到下一行,使页面错乱的情况。)

定位:

相对定位:relative(外边距合并情况,仅当父元素与子元素都是默认定位(relative),或指定为relative,且父元素合并边没有border时才会发生)

绝对定位:absolute(1、所有父类元素都没指定position时,相对于body绝对定位。2、父类中有指定position的元素时,相对于从下往上遍历的第一个指定了position的父类元素绝对定位。)

div{widht:100pxheight:100pxborder-width:2px}

上面这样的设置 div 在页面中实际站位是 104px,如果不注意很容易造成页面错乱。这是因为我们大部分情况下盒模型使用的是 W3C 标准的’box-sizing: content-box’,它在页面中实际宽度 = width+border( 该公式仅针对上面例子)。

border-image-source背景图片源

border-image-slice需要展示出来图片的尺寸,如果这个量等于图片的尺寸就都相当于整个图片展示出来

border-image-width图片边框的宽度。

border-image-outset边框图像区域超出边框的量。

border-image-repeat图片的填充形式

这个属性的兼容性不是很好,所以在正常的前端开发工作中很难用到,但是在不考虑兼容性的情况下,它无疑的一个很强大的属性,因为它可以自定义漂亮的边框,而不在是单调的线条。

这个属性使用并不太难,不过其中的border-image-slice属性在使用的时候有一个小技巧,就是当想要其中 image 不失真即不拉伸,slice 要和 width 一样。

例如:

.demo{border-width:20pxborder-image-slice:20}

.demo2{

    width: 100px

    height: 100px

    background: #ccc

    border-width: 20px

    border-style: solid

    border-image-source: url(./../img/border-image.jpg)

    border-image-slice:20

    border-image-outset:22px

    border-image-repeat: repeat

}

order-image 使用时候一定要设定 border-style 虽然这个属性没什么用,但是如果不设定它 border-image 就不生效。

border-image-slice 如果设定数值当 px 用时候直接写数字就可以 如果加上 px 反而会不生效。

border-width 用来设定边框的宽度,它决定图片边框展示的厚度(即围绕宽度)。

不要让 border-radius 的 % 值大于 50,因为如果两个相邻的半径和超过了对应的盒子的边的长度,那么浏览器要重新计算以保证它们不重合。虽然表面上看没有问题但是这样会对性能有影响。

如果用 rem、em 单位在移动端用border-radius 画圆,在部分机型里面是椭圆的问题,可以通过 50% 来解决 ,或者使用 px 配合缩放 scale 来实现 rem 单位的效果。

在内联元素span这类标签使用这个属性的时候同样有效但是记得不要使用%这样会导致一些span 标签的圆角不一样因为 % 是参考长和宽计算的。

border-radius 圆角并不会隐藏标签内部元素的内容,如果有内容溢出的情况记得增加overflow:hidden

任何元素都可以使用这个属性,包括视频、音频标签等。

一般情况下不推荐 border-top-left-radius 这类的写法除非是需要在某种交互过程中需要改变其中一个的圆角值而其它的保持不变。因为这类的标签会影响浏览器渲染的性能。

使用这个属性可以让页面更有立体感,给元素添加一个阴影,使得元素看起来是悬浮在原来的位置,下面就看看它的用法吧。

效果如下图

它主要用来告诉浏览器怎么计算元素的展示宽高的。

推荐大家设置 box-sizing 为border-box 这样方便我们写样式不必在去减去 padding 也不会造成 IE 和 Chorme 这类浏览器展示不同的 bug 。如果不设置 box-sizing 不同浏览器会有不同的计算方式。