大家好,又见面了,我是你们的朋友全栈君。
一、css初识
1、概念:css(cascading style sheets),通常称为css样式表或层叠样式表(级联样式表)。
2、作用:①主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的
布局和外观显示样式;(让网页更加丰富多彩,布局更加灵活)
②css以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同
的样式;(让HTML专注做结构,样式交给css)
二、css样式表(书写位置)
1、行内式(内联样式)
⑴概念:称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式。(实际上任何HTML标签都拥有style属性,用来设置行内式)
⑵基本语法格式:<标签名 style=“属性1:属性值1;属性2:属性值2;属性3:属性值3;”>内容</标签名>
如:<div style=”color:red;font-size:12px;”>青春不常在</div>
⑶注意:①style其实就是标签的属性;
②样式属性和值中间是“:”;
③多组属性值之间用“;“隔开;
④只能控制当前的标签和以及嵌套在其中的字标签,造成代码冗余。
⑷缺点:没有实现样式和结构相分离。
三、内部样式表(内嵌样式表)
1、概念:是将css代码集中写在HTML文档的head头部标签中,并且用style标签定义。
2、基本语法格式:
属性 | 作用 |
rel | 定义当前文档与被链接文档之间的关系,在这里需要指定为”stylesheet”,表示被链接的文档是一个样式表文件。 |
type | 定义所链接文档的类型,在这里需要指定为”text/css” ,表示链接的外部文件为css样式表,可以省略。 |
href | 定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。 |
样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
行内样式表 | 书写方便,权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签(少) |
内壁样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面(中) |
外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多,强烈推荐 | 控制整个站点(多) |
2、代码风格-样式书写:
①紧凑格式:h3 { color:deeppink;font-size:20px;}
②展开格式:(推荐)
h3 {
color:deeppink;
font-size:20px;
}
3、代码大小写:样式选择器、属性名、属性值关键字全部使用小写字母书写,属性字符串允许使用大小写。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/154596.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...