css-小总结

最新推荐文章于 2024-07-12 14:38:32 发布

BESheep

最新推荐文章于 2024-07-12 14:38:32 发布

阅读量38

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/BESheep/article/details/134500116

版权

css 层叠式样式表

html标签，负责布局，轮廓
css样式，负责表现
javascript脚本，负责行为，动态

鸟
html：一只扒光羽毛的死鸟
css: 鸟的羽毛
javascript: 活的，行为，飞，叫

一、网页中引入css的三种方式

1.1 内部样式

1.2 外部样式

引入外部的样式
<link rel="stylesheet" href="css/index.css" />

1.3 行内样式

直接插入到标签之间的
<p style="color: yellow;"></p>

三种方式的优先级：
行内样式>(外部样式,内部样式，取决于哪个后执行，就是用后面的样式)

二、css样式选择器

2.1 标签选择器

p,span,h1

2.2 类选择器

定义的名称为title的类样式
.title{
color: red;
}
使用：
<h1 class="title">巴以冲突</h1>

2.3 ID选择器

定义的名称为title的ID样式
#title{
color: red;
}
使用：
<h1 id="title">巴以冲突</h1>

选择器优先级：
ID选择器>类选择器>标签选择器

2.4 其他选择器

后代选择器：
.title span{
color: red;
}

三、CSS样式

3.1 字体样式（常用的）

font-size: 20px; 字体大小为20个像素
font-family: "微软雅黑"; 字体类型为微软雅黑字体
font-weight: bold; 字体加粗 normal去除加粗效果
font-style: italic|normal; 字体为斜体字倾斜|正常

3.2 文本样式

color: cadetblue; 文本的颜色值
line-height: 50px; 段落文本行高
text-align:left|center|right; 文本的对齐方式，左，中，右
text-decoration: underline; 文本装饰：下划线 none：去除下划线

四、盒子模型

里面可以装内容的各种标签容器都可以称作为盒子。
width: 300px; 宽度
height: 300px; 高度
border: 1px solid red; 盒子的边框线，1个像素实线红色

标签的分类：

1、块级元素
p、div、ul、li、h1-h6
特征：独占一行，可以自定义宽度和高度

2、行内元素
span、em、strong、a
特征：不独占一行，不可以自定义宽度和高度

3、行内块元素
img、input
特征：不独占一行，可以自定义宽度和高度

块级元素与行内元素的转换：
块级元素转为行内元素：display: inline;
行内元素转为块级元素：display: block;

标签的嵌套规则：
1、块级元素可以嵌套任意的元素，p标签除外，p标签只能嵌套行内元素及行内块元素
2、行内元素只可以嵌套行内元素及行内块元素，不可以嵌套块级元素
快速生成列表的快捷键：ul>li*8

五、超链接的样式（伪类）

a:link{
color: black;
text-decoration: none;
}
a:hover{
color: red;
text-decoration: underline;
}
a:visited{
color: blueviolet; /* 访问过的状态 */
}
a:active{
color: darkcyan; /* 鼠标单击未释放时的状态 */
}

六、颜色值的表示形式

6.1 单词

red

6.2 十六进制

#ff0000;

二进制 0 1
十进制
十六进制 0 1 2 3 4 5 6 7 8 9 A B C D E F

6.3 RGB

color: rgb(red, green, blue); 取值：0-255

颜色值在线转换工具：
https://www.sioe.cn/yingyong/yanse-rgb-16/

  空格

七、外边距

margin：在网页里面，盒子距离盒子的距离就叫做外边距
left 左
top 上
right 右
bottom 下

*{
margin: 0; 所有网页标签上的外边距统统清除
}
*是通配符，匹配所有的网页标签

margin: 0; 上下左右
margin: 20px 30px; 上下左右
margin: 20px 50px 100px; 上左右下
margin: 50px 30px 20px 0; 上右下左顺时针

八、内边距

内容距离盒子的距离，通俗点说就是填充。
填充可以清除，也可以自定义设置。
padding
padding: 0; 上下左右
padding: 20px 30px; 上下左右
padding: 20px 50px 100px; 上左右下
padding: 50px 30px 20px 0; 上右下左顺时针

九、边框

border

border-left: 1px solid #ff0000;
border-top: 1px solid #ff0000;
border-right: 1px solid #ff0000;
border-bottom: 1px solid #ff0000;
border-right-color: #ff0000;
border-right-width: 1px;
border-right-style: solid;