标签： 前端 css 样式
CSS样式
css全称为"层叠样式表(cascading style sheets),主要用于定义HTML内容在浏览器内的显示样式,如文字大小,颜色,字体加粗等.
example
image_1bm6p7kdsndd1acjrqstkt10p9.png-11.7kB
效果
image_1bm6p8dllgjb1u2b12nd1h14130tm.png-12.1kB
CSS样式的优势
css样式可以很方便的灵活的将网页内容呈现出自己想要的样子.
example:
将部分的文本设置成自己想要的格式
image_1bm6pl5fc1cjm1udel2a1e3s12n513.png-22.3kB
效果
image_1bm72uh0mo991891eko1909om9.png-7.9kB
css代码语法
css样式由选择符和声明组成，而声明又由属性和值组成
image_1bm73kkbk13a3188102dc3o1hmsm.png-50.2kB
讲解
- 选择符：又称选择器，指明网页中要应用规则的元素，其他元素不受影响。
- 声明：大括号中的就是声明，属性和值之间用冒号 “:” 分隔。当有多条声明时，中间可以用 “;” 分隔。
p{
font-size:12px;
color:red;
}
css注释代码
css中注释代码语句：/* 这是注释 */
而html中注释语句为： ``
注释的快捷键：ctrl+/。
css样式写法
css样式有三种写法：内联式、嵌入式和外部式
内联式
内联式css样式：就是将css代码直接写在现有的HTML标签中。属性写在style中，多个css样式代码设置可以写在一起，用 “;” 隔开。
<p style="color:blue;font-size=12px">这里的文字是蓝色的。</p>
嵌入式
嵌入式css样式：就是将css样式代码写在<style type=text/css> </style>标签之间。并且style标签中写在head标签中
<!-- 将span标签中的文字设置成蓝色 -->
<style type="text/css">
span{
color:blue;
}
</style>
外部式
外部式css样式：就是把代码写在一个单独的外部文件中，这个css样式文件以.css为扩展名。在<head>标签内将css样式文件链接到HTML文件内。
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<!-- rel 属性用于定义链接的文件和HTML文档之间的关系。-->
<!-- stylesheet 就是样式调用-->
</head>
三种CSS样式的优先级
内联式>嵌入式>外部式 //在相同的权值下
三种样式同时作用于一个标签时，一般都是内联式呈现效果
网友评论