CSS样式1

最新推荐文章于 2022-07-24 15:29:42 发布

倾听彼岸

最新推荐文章于 2022-07-24 15:29:42 发布

阅读量165

点赞数

分类专栏： web 前端

本文链接：https://blog.csdn.net/qq_46031627/article/details/103755764

版权

web 前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

CSS概述

CSS:Cascading Style Sheets层叠样式表
目的：使内容与样式相分离，便于修改样式

CSS语法

p{
 font-size:12px;/*字号/
 color:blue;/*文字颜色/
 font-weight:bold;/*加粗/
 }

p 为选择器
冒号前面部分为属性名，后面为属性值
注意
1.最后一条声明可以没有分号，但是为了以后方便修改，一般也加上分号
2.为了使用样式更加容易阅读，可以将每条代码写在一个新的行内

CSS添加方法

1.行内添加方法

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
 <p style="color:red">
 天使投资指早期投资，尤其指个人早期投资
</p>
</body>
</html>

2内嵌样式

<!DOCTYPE HTML>
<html>
<head>
 <style type="text/css">
  p{
     color:red;/*设置字体颜色/
   }
 </style>
</head>
<body>
   <p>天使投资指早期投资，尤其指个人早期投资。</p>
</body>
</html>

适用状态：
1.即使有公共CSS代码，也是每个页面都要定义的
2.适合文件很少，CSS代码也不多的情况
3.如果一个网站有很多页面，每个文件都会变大，后期维护难度也大
3添加单独文件来添加样式
两个文件夹：1.htm 2.htm
外部式样式表文件style.css

p{
 color:red;/*设置文字颜色*/
 }

网页文件：1.htm

<!doctype html>
<html>
<head>
 <link rel="stylesheet"href="css/style.css"/>
</head>
<body>
 <p>天使投资指早期投资，尤其指个人早期投资。</p>
</body>
</html>

优点：
1页面结构HTML代码与样式CSS代码的完全分离
2维护方便
3如果需要改变网络风格，只需要修改公共CSS文件
4可以在同一个HTML文档内部引用多个外部样式表
添加样式优先级
行内样式>内嵌样式>链接样式>网页默认样式

倾听彼岸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录