天涯论坛

 找回密码
 立即注册
搜索
查看: 116|回复: 4

CSS -- 简介

[复制链接]

2963

主题

144

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139411
发表于 2024-6-30 07:10:21 | 显示全部楼层 |阅读模式

Ⅰ 什么是CSS

CSS全叫作Cascading Style Sheet层叠样式表,是专用用来为HTML标签添加样式的。样式指的是HTML标签的表示效果,例如换行、宽高、颜色等等层叠属于CSS的三大特性之一,咱们将在后续内容中间商绍表指的是咱们能够将样式统一收集起来写在一个地区一个CSS文件里

为么要用CSS

/*这是注释*/ 在CSS之前,咱们想要修改HTML标签的样式则必须每一个HTML标签单独定义样式属性,如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h1 align="center"> <font color="pink" size="5">Beyand The Game</font> </h1> <p align="center"> <font color="pink" size="5">头上有包视野好,车身低矮隐蔽强</font> </p> <p align="center"> <font color="pink" size="5">天下高伤出我辈,一入神教岁月催</font></p> <p align="center"> <font color="pink" size="5">雄图霸业燃烧中,所向之处皆炮灰</font> </p> <p align="center"> <font color="pink" size="5">一代版本一代神 ,代代都有查狄伦</font></p> </body> </html>
这么做的缺点是记忆困难:必须记忆每一个标签的所有样式关联属性,倘若标签某个样式关联的属性,那样设置了效果代码耦合度高:HTML语义与样式耦合到一块扩展性差:当某一类样式必须修改时,咱们必须找到所有设置了该样式标签进行修改于是CSS应运而生,很好地处理了以上三个问题
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> h1,p { color: pink; font-size: 24px; text-align: center; } </style> </head> <body> <h1>Beyand The Game</h1> <p>头上有包视野好,车身低矮隐蔽强</p> <p>天下高伤出我辈,一入神教岁月催</p> <p>雄图霸业燃烧中,所向之处皆炮灰</p> <p>一代版本一代神,代代都有查狄伦</p> </body> </html>

怎样运用CSS

语法选取器声明声明由属性和值构成,多个声明之间用分号分隔
四种引入方式行内式行内式是在标签的style属性中设定CSS样式。这种方式表现出CSS的优良,不举荐运用
<p style="color: red;font-size: 50px;text-align: center">"IS-7"是一个非常了不起的车</p>
嵌入式嵌入式是将CSS样式集中写在网页<head></head>标签内的的<style></style>标签对中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> p { color: red; font-size: 50px; text-align: center } </style> </head> <body> <p>"ST-II"是一个有两根的人</p> </body> </html>
导入式新建外边样式表,而后运用导入式和链接式引入
首要在与html文件同级目录下有一个css文件夹该文件夹下新建一个外边样式表mystyle.css,内容为 p { color: red; font-size: 50px; text-align: center } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> /*形式一*/ /*@import "css/mystyle.css";*/ /*形式二*/ @import url("css/mystyle.css"); </style> </head> <body> <p>"705工程A"是一个非常挺人</p> </body> </html>
链接式(举荐运用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/mystyle.css"></head> <body> <p>"260工程"是一个非常尖的人</p> </body> </html>
导入式与链接式的区别<link/>标签属于XHTML,@import是属于CSS2.1特有的,针对不兼容CSS2.1的浏览器来讲便是效的导入式的缺点导入式会在全部网页装载完后再装载CSS文件,因此呢这就引起了一个问题,倘若网页比很强则会儿显现表示样式的页面,闪烁一下之后,再显现网页的样式。这是导入式固有的一个缺陷,用户体验差链接式的优点运用链接式时与导入式区别的是它会在网页文件主体装载前装载CSS文件,因此呢表示出来的网页从一起始便是带样式的效果的,它不会象导入式那样先表示样式的网页,而后表示有样式的网页,这是链接式的优点

重视重要

style标签必要放到head内 ,type="text/css"表率文本类型的csstype属性其实能够不消写,默认便是type="text/css"设置样式时必要根据固定的格式来设置,key:value;其中 ; 不可省略,最后一个属性其实能够省略,但咱们能够简单地统一记成不可省略就行了




上一篇:第二章 药代动力学
下一篇:cssci是什么级别刊物
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-8-27 23:24:20 | 显示全部楼层
“板凳”(第三个回帖的人)‌
回复

使用道具 举报

0

主题

771

回帖

7

积分

新手上路

Rank: 1

积分
7
发表于 2024-9-7 20:58:56 | 显示全部楼层
感谢您的精彩评论,为我带来了新的思考角度。
回复

使用道具 举报

2984

主题

2万

回帖

9956万

积分

论坛元老

Rank: 8Rank: 8

积分
99569176
发表于 2024-10-12 05:06:23 | 显示全部楼层
你的见解独到,让我受益匪浅,期待更多交流。
回复

使用道具 举报

3069

主题

2万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99138952
发表于 2024-10-23 07:49:35 | 显示全部楼层
顶楼主,说得太好了!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|天涯论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-22 17:09 , Processed in 0.105597 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.