Day02 javaweb视频教程-css

不管这概括的内容怎么样,这么好听的音乐是不是就应该给个赞(赏)!

css 层叠样式表(主要由美工部分负责,只要能看懂就行,不用太纠结)。

再用css时可以到网上找使用手册,每个属性都记载的很清楚。

1.功能:将网页内容和显示样式进行分离,提高了显示功能。

放张照片压压惊,我也不知道为啥选这个

2.css与html四种结合方式

第一种:在标签中加style属性,多个属性都放在一个双引号下

第二种:

第三种:在style标签里面 使用@import url(css文件的路径)

@import url

第四种:使用头标签link,引入外部css文件

注:第三种在一些浏览器下不起作用,一般都使用第四种

优先级:(一般情况)从上到下,从外到内,优先级由低变高,后加载的优先级高

3.css选择器:

标签选择器:使用标签名作为选择器的名称

类(class)选择器:每个html标签都有属性class,可以用class的属性值作为选择器名称,还可以用div.class属性值,来设置一部分div标签。.class属性值表示所有属性名一样的标签都改变样式。

id选择器:#id属性值。

基本选择器优先级:style>id>类>标签(标签中的style属性)

扩展选择器:

关联选择器

设置div中的p标签样式,可以设置嵌套标签里面的样式

div p { } 在标签间加个空格

组合选择器

把div和p标签设置成相同的样式,把不同的标签设置成相同的样式

div,p { } 在标签间加个逗号(英文半角)

伪元素选择器 css中定义好的,直接拿来使用。有很多比如超链接点击前,覆盖和点击后的不同等等,用时百度即可,

........

重点来了

4.盒子模型:属性:

边框border width,color,style

内边距padding length

外边距margin auto,length

三个属性都有上下左右,都可以分别设置也可以统一设置。

5.float浮动布局(了解,用得少,不同浏览器显示效果不同)

属性:none,right,left

浮动布局就跟水泡一样,从下面往上漂浮起来,当属性为left时,就是从左边漂浮,当遇到阻碍(其余块元素)时就会往右边走。也就是说从左边往上走然后往右边跑,直到“卡”住不动,或者到达顶部。right同理。

6.定位布局

position:

absolute绝对定位 在页面的任意位置,设置以后将保持位置不动。相当于在空中漂浮,会覆盖其余元素

relative相对定位 与上面的区别是不是漂浮在空中,在界面中还有位置。

都可以用top,bottom来确定位置

最经典的事图文混排folat和图像签名position

***css属性非常多,有时会增加,有些会被遗弃。所以在使用时要看看css的文档。

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180913G2341200?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券