week 3 in bluemsun

忆迟

已于 2022-04-14 15:26:40 修改

阅读量174

点赞数

文章标签：前端

于 2022-04-14 15:21:37 首次发布

本文链接：https://blog.csdn.net/qq_64747824/article/details/124165928

版权

初探css

css文件基本结构

选择器{

属性名:属性值;

}

（若为最后一个属性可以不写分号）

css选择器

选择器种类

标签选择器（使用较少）
- 定义样式：与标签同名；
- 引用样式：只要是该标签内的内容，都会被设置成该样式。
类别选择器（可多次被引用）
1. 定义样式：以.开头定义一个名字；
2. 引用样式：在想要引用该样式的标签中加class="(无.)名字"。
ID选择器（原则上仅可被引用一次）
1. 定义样式：以#开头定义一个名字；
2. 引用样式：在想要引用该样式的标签中加id="(无#)名字"。

声明方式

嵌套声明：p span{属性:属性值}对p内部的span设置属性
集体声明：h1,p{属性:属性值}对h1和p设置相同的样式
全局声明：*{属性:属性值}对全局文字设置相同的样式
混合：多个class可共同引用，在每个名字之间加一个空格；多个id不可同时引用

css添加方法

行内样式：在要添加样式的标签内部加一个style="属性:属性值"
1. ```
 <p style="color:crimson">这是一段添加了行内样式的文字</p>
```

内嵌样式：在head标签内写一个style标签，在style标签内用type="text/css"表示当前样式是以css文本规定的。标签内部格式同css文件格式。

<head>
    <meta charset="UTF-8">
    <title>内嵌样式</title>
    <style type="text/css">
        p{
            color:darksalmon;
        }
    </style>
</head>
<body>
    <p>这是一段添加了内嵌样式的文字</p>
</body>

链入样式：常用于对同一站点下的多个网页设置同样的样式。
1. 定义样式：将所需样式写好并保存为.css文件，与网页放入同一个文件夹中；
2. 引用样式：在需要该样式的网页文件head标签内写link标签，具体格式为<link(文件的链接) rel(链接文件的类型)="stylesheet(样式表文件)" href="相对路径">
3. ```
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="链入样式.css">
    <title>链入样式</title>
</head>
<body>
    <p>这是一段添加了链入样式的文字</p>
</body>
```
4. ```
p{
    color: cornflowerblue;
}
```

css样式

文本样式

段落格式
属性	描述	取值举例
letter-spacing	字符间距	1px，-3px（负值会导致字符重叠）
line-height	行高	12px，1.5em，120%
text-align	对齐方式	center（居中），left（左对齐），right（右对齐），justify（两端对齐）
text-indent	首行缩进	2em

附：单位说明

px：像素
em：字符（自动适应用户所应用的字号）
%：百分比（默认子层继承父层样式，100%为父层样式）

文字格式
属性	描述	取值举例
color	文本颜色	red（w3c标准），#f00（十六进制数），rgb(255,0,0)（RGB），rgba(255,0,0,0.5)（RGB+透明度）
text-decoration	装饰线	none（可用于去除超链接默认添加的下划线），overline（上划线），underline（下划线）， line-through（删除线）
font	在一个声明中设置所有的字体属性	italic（斜体） bold（粗体） 12px（字号） '幼圆'（字体）
font-family	字体系列	"Microsoft YaHei"
font-size	字号	18px，120%
font-style	斜体	italic
font-weight	粗体	bold

背景样式

属性	描述	取值举例
background	在一个声明中设置所有的背景属性	rgb(0,255,0)（颜色） url("pic01.jpg")（图片） repeat（填充方式）
background-color	背景颜色	red，#f00，rgb(255,0,0)，rgba(255,0,0,0.5)
background-image	背景图片	url("pic02.jpg")
background-repeat	背景图片填充方式	repeat（棋盘格式填充），repeat-x（横向填充），repeat-y（纵向填充），no-repeat（不重复）

注：若同时设置了背景颜色与背景图片，则优先显示背景图片。若背景图片无法显示，则显示背景颜色

列表样式

属性	描述	取值举例
list-style	在一个声明中设置所有的列表属性	url(pic03.gif)（标志图片） square（标志样式） inside（标志位置）
list-style-image	列表标志为图片	url(pic04.gif)
list-style-position	列表标志位置	inside（列表标志与文本左对齐），outside（列表内文字与文本左对齐）
list-style-type	列表标志样式	none（无标志），disc（实心圆），circle（空心圆），square（实心方块），decimal（数字），lower-roman（小写罗马数字），upper-roman（大写罗马数字），lower-alpha（小写英文字母），upper-alpha（大写英文字母），lower-Greek（小写希腊字母），lower-latin（小写拉丁字母），upper-latin（大写拉丁字母）

盒子模型

在开发网页时，首先会将网页划分成几个模块，再在几个模块中划分小模块，类似于大盒子套小盒子，称为盒子模型。

盒子模型的组成

content内容（非css样式的属性）
height（高度）
width（宽度）
border（边框)
padding（内边距）
margin（外边距）

属性

overflow：当内容溢出盒子时的处理

hidden 超出部分不可见
scroll 显示滚动条
auto 如有超出部分，显示滚动条

border

属性	描述	取值举例
border	在一个声明中设置所有的边框属性	1px soild rgb(0,0,255)
border-width	边框宽度	2px，thin，medium，thick
border-style	边框线型	dashed（虚线），dotted（点画线），soild（单实线），double（双实线）
border-color	边框颜色	red，#f00，rgb(255,0,0)，rgba(255,0,0,0.5)

margin&padding
1. 1px 2px 3px 4px（上右下左分别为1，2，3，4）
2. 1px 2px 3px（上右下左分别为1，2，3，2）
3. 1px 2px（上右下左分别为1，2，1，2）
4. 1px（上右下左分别为1，1，1，1）
margin属性会在竖直方向进行合并，只保留较大的数值，水平方向上不会合并