怎么用css一步一步搭网站

怎么用css一步一步搭网站,第1张

选择器

CSS选择器主要包括id、class和标记选择器。复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器。

交集选择器由连个选择器直接连接构成,其中第一个必须是标记选择器,第二个必须是类别选择器或者id选择器,这两个选择器之间不能有空格。这种方式构成的选择器,将选中同时满足前后定义的元素

并集选择器是多个选择器通过逗号连接而成的。

最常用的是通过嵌套的形式,即多个选择器之间以空格隔开的后代选择器。

伪类选择器

除了3种主要类型的选择器之外,还有伪类选择器和伪元素选择器。

伪类选择器是在之前选择器的基础上,加上一些用于指定元素状态的关键字,如鼠标位置、浏览历史、内容状态等。伪类选择器的标志是在选择器与关键字之间以:间隔。

a:hover{background:green;}

a:visited{color:green;}123456

伪元素选择器的功能是在选择某元素的基础上,在文档中再增加一些额外的元素。伪元素的标志是添加::

<p>isaboy</p>p::before{content:"sysuzhyupeng";}1234

before选择器将在段落之前插入content属性中的文字内容,所以段落将显示为”sysuzhyupengisaboy”。

CSS层叠

CSS层叠指的是在CSS继承的基础上,出现冲突的解决方案。层叠的规则涉及权重的计算,这里不详细展开。

CSS禅意花园

CSS禅意花园是加拿大的设计师DaveShea创建的,他在网站设计的过程中发现CSS的巨大潜力没有被发掘出来,采用征集作品的方式来展现CSS魅力。像两列布局的代表作《郊野》,三列布局的代表作193号作品,三列布局的变体《百合池塘》,多列布局的代表作《郁金香》,圆角设计的《日与夜》等。

盒子模型

在CSS中,一个独立的盒子由content、padding、margin和border组成。一个盒子所占的宽度和高度,是由盒子的4个部分相加而成的。

一个页面由很多盒子组成,这些盒子之间会相互影响,因此掌握盒模型需要从两方面来理解,一是理解一个孤立的盒子的内部结构,二是理解多个盒子间的相互关系。

盒子模型分为IE盒模型和w3c盒模型,IE盒模型的width包括了盒子的padding和border,而w3c的width只包括盒子content的宽度。怎么样才算是选择了“标准w3c盒子模型”呢?很简单,就是在网页的顶部加上doctype声明。假如不加doctype声明,那么各个浏览器会根据自己的行为去理解网页,即IE浏览器会采用IE盒子模型去解释你的盒子,而ff会采用标准w3c盒子模型解释你的盒子,假如加上了doctype声明,那么所有浏览器都会采用标准w3c盒子模型去解释你的盒子。

border用于分隔不同元素,在计算精细的版面时,一定要将border的宽度考虑进去。border的属性有三个,分别是border-color、border-width和border-style。在给元素设background-color的时候,IE的作用域为padding+content,而Firefox则为padding+content+border。这在border设为dotted的时候表现得更明显(dotted的间隙展现出背景色)。

为了方便组织各种盒子的排列和布局,CSS规范的指定者进行了深入细致的考虑。CSS规范的思路是,先确定一种标准的排版模式,这样可以保证设置的简单化,这就是标准流。但是仅仅通过标准流的方式,很多版式是无法实现的,所以CSS规范又给出了浮动属性和定位属性等。

<span>和<div>标记一样,作为容器标记而被广泛应用在HTML语言中,两者除了块级元素和行内元素的区别之外,可以互换,这两个标记起到的作用都是独立出各个区块,在这个意义上两者没有不同。

如果要精确地控制盒子的位置,就必须对margin有更深的理解,因为padding存在于盒子内部,通常它不会涉及盒子之间的关系和相互影响的问题。当两个行内元素紧邻时,它们之间的距离为第一个盒子的margin-right加上第二个盒子的margin-left。然而如果不是行内元素,而是垂直的块级元素,就会出现外边距合并的情况,较小的margin塌陷到较大的margin中,要解决这个问题可以参考我另一篇博文BFC

margin也可以设为负值,会使盒子向相反的反向移动,甚至覆盖在另外的盒子上。当块是父子关系的时候,可以将子块从父块中分离出来。

盒子的浮动与定位

在标准流中,没有指定宽度的块级元素会沿着水平方向无限伸展,直到包含它的元素的边界。CSS中有一个属性float,默认值为none,如果将float的值设为left或者right,盒子的宽度不再伸展,而是根据盒子内的内容宽度来确定。当两个元素分别向左和向右浮动的时候(box1向右浮动,box2向左浮动),我们发现,可以在不调整HTML的情况下通过CSS布局调整内容的显示位置(box2在box1的左边)。这样我们就可以在写HTML的时候,确定内容的逻辑位置,在CSS中确定内容的显示位置,把重要的内容放在逻辑位置的较前面,这样加载网页的时候,用户就会先看到重要内容。

使用clear属性可以清除浮动的影响,假设不希望文字围绕左边浮动的盒子,可以在文字的p标签中设置clear:left。clear属性可以设为left、right和both(both通常用来清除整行元素的浮动)。

CSS中position的值有四种:

static,默认值,盒子按照标准流(包括浮动)方式布局

relative,盒子相对于它原来的标准进行移动,相对定位的盒子仍在标准流。

absolute,绝对定位,盒子以它的包含框为基准进行偏移,绝对定位的盒子从文档流中脱离。

fixed,固定定位,与绝对定位相似,只是包含框变成浏览器窗口。

确定absolute的包含框有这几个原则:

position属性已经被设置,而且不是static。所以经常出现父元素相对定位、绝对定位或者固定定位,而子元素绝对定位的情况。

是从子元素向祖先元素中查找,祖先元素中第一个满足上一条规则的元素。

IE6中有一个固有错误,相对于父元素的左边进行绝对定位会加上父元素的padding,这时候需要给父元素添加一个属性height:1%。

浏览器的Bug与Hack

任何程序都很难清除掉所有Bug,浏览器也一样。加上对规范的解释不统一,因此类似的错误一直存在。因此也应运而生很多CSSHack来解决这些Bug,多数CSSHack都是用来解决IE55以下浏览器的。因为浏览器的支持度问题,网站又分为了渐进增强和优雅降级两种开发方式。

z-index

z-index用来设置重叠块的上下位置,和它的名称一样,想象页面为x-y轴,垂直于页面的方向为z轴。当两个块z-index值相同时,按照原来的方式堆叠。z-index默认值为0,可以设置正负值。

字体

p{font-family:Arial,"TimesNewRoman";}123

以上语句同时声明了两个字体名称,如果用户的计算机中没有第一种,则使用第二种。一些字体的名字中含有空格,所以需要用引号将其引起来。

文字大小的常用单位是px,表示在浏览器上一个像素单位的大小,因为访问者的显示器分辨率不同,而且每个像素的实际大小也不同,所以px实际上是一个相对单位。现在我们常用的适配屏幕布局的单位是rem。

字体的行高line-heigth可以设置成与字体大小的比值。

颜色

在HTML页面中,颜色统一采用RGB格式。由三原色的不同比重组成,一共有0-255档。当三种颜色都设置为255时就是白色,其中,FFFFFF是十六进制的表示法,前两位为红色分量,接下来为绿色,最后为蓝色。不仅可以写成十进制,也可以写成rgb(0%,0%,0%)的百分比,或者0-255的十进制数字。

圆角

一个150pxx150px大小的方形,将它的四个角的半径都设置成50%。根据W3Cborder-radius的规范定义,如果border-radius的值是百分比的话,就是相对于borderbox的宽度和高度的百分比。在我们的例子中,盒子的宽高都是150px,所以50%对应的就是75px。

也就是说,把border-radius设置为50%已经可以实现圆角效果了,设成100%反而会损失性能,具体可以参考border-radius50%和100%的区别

CSS3动画

CSS3动画主要通过transition和animation两种方式来实现,其中,transition是为页面元素设置某个需要产生动画效果的属性,如宽度(width),高度(height),透明度(opacity),甚至3D旋转等,并使这些值在变化时产生相应的过渡效果。而animation可以预先为动画设置多个节点,在每个节点中含有不同的状态属性,比transition来得更精细。

a{color:fff;}

a:hover{color:green;}

a{-webkit-transition:all5s;transition:all5s;}12345678910

这里我们设置了all,即a标签任何属性变化,都以动画的形式呈现,动画的时间为05秒。我们还可以设置过渡效果的速度变化(加速度),除了linear,ease外,还有ease-in,ease-out,ease-in-out等速度曲线可以选择,分别代表慢速开始,慢速结束,慢速开始和结束。

a{-webkit-transition:all5slinear;transition:all5slinear;}1234

我们还能为动画设置延迟的时间,放在最后一个参数。

a{transition:color5slinear,background5sease-in-out1s;}123

我们还可以利用伪元素来实现一些动画效果,这里要注意的是,伪元素的hover状态是:hover::after,而不能为::after:hover(在less中不用考虑这个问题)

a:hover{padding-left:20px;}

a:hover::after{right:5%;}123456

通过CSS3可以实现很多动画效果,比如滑屏(切换left值),或者对页面进行缩放,使用transform属性中的scale方法。

content{-webkit-transform:scale(1,1);transform:scale(1,1);}

contentmove{-webkit-transform:scale(0,0);transform:scale(0,0);}

希望能帮到您

1、标记选择器(如:body,div,p,ul,li)
2、id选择器(如:id="name",id="name_txt")
3、类选择器(如:id="name",id="name_txt")
4、后代选择器(如:#headnavulli从父集到子孙集的选择器)
5、子元素选择器(如:div>p,带大于号>)
6、伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)
看完了基本的css选择器类型后,我们接着来看一下css优先级的概念。
当两个规则都作用到了同一个html元素上时,如果定义的属性有冲突,那么应该用谁的值的,用到谁的值谁的优先级就高。
我们来看一下css选择器优先级的算法:
每个规则对应一个初始"四位数":0、0、0、0
若是行内选择符,则加1、0、0、0
若是ID选择符,则加0、1、0、0
若是类选择符/伪类选择符,则分别加0、0、1、0
若是元素选择符,则分别加0、0、0、1
算法:将每条规则中,选择符对应的数相加后得到的”四位数“,从左到右进行比较,大的优先级越高。
看完了上述内容,那我们就来看看css选择器优先级的具体排序。
css选择器优先级最高到最低顺序为:
1id选择器(#myid)
2类选择器(myclassname)
3标签选择器(div,h1,p)
4子选择器(ul<li)
5后代选择器(lia)
6伪类选择(a:hover,li:nth-child)
最后,需要注意的是:
!important的优先级是最高的,但出现冲突时则需比较”四位数“;
优先级相同时,则采用就近原则,选择最后出现的样式;
继承得来的属性,其优先级最低。

ID选择器只可以使用一回
而类选择器可以在html文档中使用多回。也就是说。在处理诸如命名结构上的元素,如"container","header","footer"等,使用ID选择器更加合适。而其他一些局部的,特殊的样式,可以复用的样式,最好使用类选择器去命名,如class="clearfix"等。可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/13345488.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-18
下一篇 2023-07-18

发表评论

登录后才能评论

评论列表(0条)

保存