Web笔记（基础4）

最新推荐文章于 2024-07-20 18:16:53 发布

2301_78691786

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量36

点赞数

文章标签：前端笔记

本文链接：https://blog.csdn.net/2301_78691786/article/details/131627244

版权

四.CSS基础

1.css：层叠样式表，用于美化网页，布局页面，是一种标记语言
2.主要构成部分：选择器，一条或多条声明，给谁改样式{改什么样式}
3.写入<head> <style>---</style> </head>中

4.基础选择器：标签选择器，类选择器，id选择器，通配符选择器
(1) 标签选择器
<style>                   <body>
   p {color: red;}           <p>标签选择器</p>
</style>                   </body>
(2) 类选择器 calss,“.”定义
<style>                   <body>
   .--- {color: red;}           <li class="---">类选择器</li>
</style>                   </body>
长词组用”-“来连接多个名字用空格隔开
(3) id选择器只能调用一次
<style>                   <body>
   #--- {color: red;}           <li id="---">id选择器</li>
</style>                   </body>
(4) 通配符选择器 *选中页面所有的元素
<style>                   <body>
   * {color: red;}           <li>通配符选择器</li>
</style>
                   </body>

5.css字体属性
(1) 字体设置 font-family
<style>
   body{font-family:"Microsoft Yahei",tahome,arial;}
</style>
各字体用英文状态下逗号隔开，如有空格隔开的多个单词字体则加引号
(2) 字号大小 font-size
font-size:---px;       标题标签比较特殊，需要单独指定大小
(3) 字体的粗细 font-weight
font-weight:数字;       加粗700，正常400，数字后面无单位
(4) 文字样式 font-style
font-style：normal;   normal不倾斜 italic倾斜
(5) 复合属性
font:font-style文本样式 font-weight字体粗细 font-size/lne-height字号大小 font-family字体设置
不能更改顺序，属性用空格隔开 size family

6.css文本属性
(1) 文本颜色 color
预定义颜色值：red，green，blue       如：color：red；
十六进制：#------数字或A-F字母       如：color：#ff00cc；
RGB代码：rgb（-，-，-）       如：color：rgb（255，0，7）；
(2) 对齐文本 text-align
taxt-align:left左对齐/right右对齐/center居中对齐;
(3) 装饰文本 text-decoration
text-decoration：none无装饰线/underline下划线/overline上划线/line-through删除线;
(4) 文本缩进 text-indent
text-indent:数字px/2em;       2em是当缩进前元素2个文字大小的距离
(5) 文本字
text-transform:uppercase/lowercase/capitalize;
       英文字母大写   小写   首字母大写
(6) 文本阴影   text-shadow
(7) 行间距 line-height
line-height 数字px;

7.css引入方式
(1) 内部样式表（嵌入式）
<head> <style>---</style> </head>   控制范围整个html页面
(2) 行内样式表
<标签 style="属性;">---</标签>
(3) 外部样式表
在外部新建一个后缀为.css的文件   不用写style
<link rel="stylesheet" href="css文件的路径地址">   写入head中
stylesheet表示连接的文档给是一个样式表文件
8.chrome调试工具
F12/右击检查6+
ctrl+滚轮可以放大缩小页面
ctrl+0复原网页大小
检测工具不会改变代码,改完后要复制到原处修改