css基础、盒子模型、选择器

阿斯番茄

已于 2022-04-14 22:57:35 修改

阅读量413

点赞数

文章标签：前端 css3 css

于 2022-04-14 22:56:09 首次发布

本文链接：https://blog.csdn.net/m0_62558365/article/details/124158278

版权

css基础、盒子模型、选择器

css基础
盒子模型
选择器

css基础

一、css简介

CSS：Cascading Style Sheets层叠样式表

网页实际上是一个多层的结构，通过css可以为网页的每一层设计样式，我们看到的只是网页最上面的一层。也就是说css是为网页化妆的一种方式。

css一般放在style标签里，而style标签一般写在head标签里。

二、 css基本语法

css文本属性

属性	描述	取值
color	文本颜色	red/#f00/rgb（255，0，0）
letter-spacing	字符间距	2px-3px
line-height	行高	14px/1.5em/120%
text-align	对齐	center/left/right/justify
text-decoration	装饰线	none/overline/underline/line-through
text-indent	首行缩进	2em

css背景

属性	描述
background	背景：颜色图片 repeat
background-color	背景颜色
background-image	背景图片
background-repeat	重复方式

css颜色

颜色	描述
red，green	颜色名
rgb（x，x，x）	每个颜色分量取值0-255
rgb（x%，x%，x%）	每个颜色百分比值0%-100%
rgba（x，x，x，x）	值透明度（0.0-全透明/1.0完全不透明）
#rrggbb	十六进制数

css单位

单位	说明
px	像素
cm	厘米
in	英寸
%	百分比
em	1em为当前元素大小

css字体font

属性	描述
font-size	字体大小
font-weight	字体粗细
font-style	字体样式

css列表

ul和ol共用样式

属性	描述
list-style	所有用于列表的属性声明中
list-style-image	为列表项标志设置图像
list-style-position	标志的位置
list-style-type	标志的类型

三、css应用方式

行内样式表（内联样式）：在标签内部通过style属性来设置元素的样式

<p style="color:red>蓝旭< /p>

使用内联样式，样式只对一个标签生效，改起来很不方便，所以开发时不使用内联样式

内嵌样式表：将样式写到head中的style标签里

<style>
		p{
				color:red;
  		}
< /style>

里面的样式不能跨页面进行复用

外部样式表：将css样式编写到一个外部的css文件中，通过一个外部标签link引入

外部样式表文件 style.css
p{
	color:red;
	}
< link rel="stylesheet" href="css/style/.css" />

最推荐的一种方式

css优先级(选择器权重）：内联样式>id选择器>类和伪类选择器>元素选择器

四、css基本语法

主要有选择器和声明块两部分

选择器：通过选择器可以选中页面中的指定元素
声明块¹：通过声明块来指定要为元素设置的样式

盒子模型

box model、盒模型、盒子模型、框模型：css将页面中所有元素都设置成一个矩形的盒子，并将盒子摆放在页面不同位置

一、组成部分

内容区（content）
边框（border）
内边距（padding）
外边距（margin）

二、内容区（content）

元素中所有的子元素和文本内容都在内容区排列，其大小由width和height两个属性来决定
width设置内容区宽度，height设置内容区宽度

三、边框（border）

边框属于盒子边缘，边框的大小会影响整个盒子大小

边框宽度（border-width）

可以指定四个方向的边框的宽度，默认值为3个像素。

四个值：上右下左
三个值：上左右下
两个值：上下左右
一个值：上下左右

border-top/bottom/right/left-width可以单独指定某一边

边框颜色（border-color）

可以省略不写，如果省略了则自动使用color的颜色值，方向和宽度类似。

边框样式（border-style）

默认值是none，没有边框。

实线：solid
点状虚线：dotted
虚线：dashed
双线：double

四、内边距（padding）

内容区与边框之间的距离，会影响到盒子的大小，背景颜色也会延伸到其上。

有padding-top/bottom/left/right四个方向内边距

盒子的大小=内容区+内边距+边框

五、外边距（margin）

不会影响盒子可见框的大小，但会影响到盒子的位置，也就是实际占用空间。

同样有四个方向：

margin-top：上外边距，设置一个正值，元素会向下移动，设置负值会向相反方向移动
margin-left：左外面距，设置一个正值，元素会向右移动，负值同上
margin-bottom：下外边距，设置一个正值，其下面的元素会向下移动，负值同上
margin-right：默认情况下，不会产生任何效果

由于元素中的界面按从左到右顺序排列的，所以默认情况下我们设置左和上外侧边距会移动元素自身，而设置下和右外边距会移动其他元素

选择器

选择器：指定要作用的css标签的名称就是选择器

一、常用选择器

元素选择器：
作用：根据标签名来选中指定元素
语法：标签名{}

p{
	color：red；
}

id选择器：
作用：根据元素的id属性选中一个元素
语法：#id属性值{}

<style>
	#d1{font-size;12px;}
<style>
<body>
	< p id="d1">蓝旭< /p>
</body>

类选择器：
作用：根据元素的class属性值选中一组元素
class是一个标签属性和id类似，不同的是class可以重复使用，可以通过class属性来为元素分组
语法：.class

<style>
	p{font-size:12px;}
</style>
<body>
	< p class="one">蓝旭< /p>
</body>

通配选择器：
作用：选中页面所有元素
语法：*

*{
	color:red;
}

二、复合选择器

交集选择器
作用：选中同时复合多个条件的元素
语法：选择器1选择器2…{}

div.red{
	font-size:30px;
	}
<div class="red"> 蓝旭 </div>
<p class="red> lanxu </p>

并集选择器（选择器分组）
作用：同时选择多个选择器对应的元素
语法：选择器1，选择器2…{}

h1,p{
	text-align:center;
	}

三、关系选择器

子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素

div > span{
	color:red;
	}
<div>
	<span>lanxu</span>
</div>

后代元素选择器
作用：选中指定元素内的指定后代元素
语法：祖先后代

div span{
	color:red;
	}
<div>
	<span>lanxu</span>
</div>

兄弟元素选择器
（1）选择下一个兄弟：前一个+下一个
```
p+span{
	color:red;
	}
```
（2）选择下面所有的元素：兄~弟
```
p~span{
	color:red;
	}
```

四、属性选择器

<body>
<p title="abc">lan</p>
<p title="aaa">xu</p>
</body>

[属性名]：选择含有指定属性的元素

p[title]{

[属性名=属性值]：选择含有属性和属性值的元素

p[title]=abc{

[属性名^=属性值]：选择属性值以指定值开头的元素

p[title^=abc]{

[属性名$=属性值]：选择属性值以指定值结尾的元素

p[title$=abc]{

[属性名*=属性值]：选择属性值中含有某值的元素的元素

p[title*=abc]{

声明块由一个一个声明组成，一个样式命对应一个样式值，名和值之间以：链接，以；结尾 ↩︎

阿斯番茄

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css基础、盒子模型、选择器

第三次预习博客css基础css简介盒子模型选择器css基础css简介CSS：Cascading Style Sheets层叠样式表网页实际上是一个多层的结构，通过css可以为网页的每一层设计样式，我们看到的只是网页最上面的一层。也就是说css是为网页化妆的一种方式。css应用方式1.行内样式表（内联样式）：在标签内部通过style属性来设置元素的样式<p style="color:red>蓝旭< /p>使用内联样式，样式只对一个标签生效，改起来很不方便，所以开发
复制链接

扫一扫