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

gym21

已于 2022-04-20 13:28:00 修改

阅读量214

点赞数 1

分类专栏： CSS基础选择器盒子模型文章标签：前端

于 2022-04-13 19:16:37 首次发布

本文链接：https://blog.csdn.net/gym21/article/details/124149434

版权

CSS基础同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

选择器

1 篇文章 0 订阅

订阅专栏

盒子模型

1 篇文章 0 订阅

订阅专栏

一、CSS基础

1.概述

CSS：Cascading Style sheets，级联/层叠样式表

CSS分为两部分——CSS选择器和CSS属性。

⽤于定义如何显⽰HTML元素
通常保存在外部.css⽂件中，编辑此⽂件就能改变页⾯整体外观

2.语法

h1 {color:red; font-size:14px;}

3.引入方式

行内样式：写在标签元素里面，以 style="" 形式，写在<head></head>中，优先级最高。（不推荐，显得太过于复杂）

内联样式：写在 <style></style>这对标签中，样式少的话直接写在这里。

外联样式：写在.css文件中，然后用 <link src=""> 引入样式。（推荐）

4.属性

1. 文字属性

(1) font-family：定义文本的字体系列

body{
    font-family:   ;}

(2) font-size：字体大小 (谷歌浏览器默认是 16px)

单位
px	像素是我们最常用的单位
em	相对容器字体大小，且会继承父元素的字体大小
rem	相对于根元素（通常是HTML元素）字体的大小

(3) font-weight：字体粗细 (推荐用数字，并且数字不加单位)

p{
  font-weight:bold;}

取值：

单词取值:
- bold 加粗
- bolder 比加粗还要粗
- lighter 细线，默认就是细线
数字取值：
- 100-900之间整百的数字

(4) font-style：文字样式 (这个平时用得较少，反而要给斜体标签（em、i）改为不倾斜)

p{
  font-size:normal;}

normal：默认值，浏览器会显示标准的字样

italic：显示斜体

(5) font：字体复合属性

p{
  font: font-style font-size font-weight font-family;}

注意：不能更换顺序

2. 文本属性

(1)文本颜色

color：定义文本颜色

p{
  color:red;}

颜色属性值表示方式：

预定义的颜色值：red、blue等
十六进制：#333333、#ffffff 等
RGB：rgb(255, 0, 0)

(2)对齐文本

text-align：用于设置元素内文本内容的水平对齐方式

div{
    text-align:center;}

left：左对齐
right：右对齐
center：居中对齐

(3)装饰文本

text-decration：添加到文本的修饰，如：上划线、下划线、删除线

a{
  text-decration:none;}

none：默认值，即没有装饰线
underline：下划线，链接a会自带下划线
overline：上划线
line-through：删除线

常用 text-decration: none 去除链接的自带的下划线

(4)文本缩进

text-indent：用于指定文本第一行缩进，常用于段首

p{
  text-indent:32px;}

默认一个字是16px，缩进两个字就是32px
也可以使用 2em，相对缩进

(5)行间距 (推荐使用数字型的)

line-height：用于设置行高

p{ line-height: normal;}
p{ line-height: 26px;}
p{ line-weight: 1.5;}
p{ line-weight: 1.5em;}
p{ line-weight: 150%;}

normal：默认值
26px：字体高为16px，那么行距就是10，上下各5px
数字：行高就是 数字 * 字体大小，所以1.5就是 29px
em：浏览器字体默认是16px，那么1.5em就是29px
百分比：百分比 * 字体大小

3. 颜色属性

color: 修改文字颜色

h1{ color: red;}

取值

(1)英文单词

(2)rgb

格式: rgb(0,0,0)
第一个数字就是用来设置三原色的光源元件红色显示的亮度
第二个数字就是用来设置三原色的光源元件绿色显示的亮度
第三个数字就是用来设置三原色的光源元件蓝色显示的亮度
这其中的每一个数字它的取值是0-255之前, 0代表不发光, 255代表发光, 值越大就越亮

(3)rgba

格式：rgba(255,0,0,0.2)
a代表透明度, 取值是0-1, 取值越小就越透明

(4)十六进制

格式：#FFEE00
十六进制中是通过每两位表示一个颜色，#FFEE00 FF表示R EE表示G 00表示B

(5)十六进制缩写

格式：#FFEE00 == #FE0
在CSS中只要十六进制的颜色每两位的值都是一样的, 那么就可以简写为一位
如果两位相同的数字不是属于同一个颜色的, 不能简写，如#122334

4. 背景属性

background-size: cover（整张覆盖）   auto(自动 默认)  contain（包含）  >percentage（设置百分比）  length（设置宽高）
background-size: 50px  设置宽高都为50px
background-size: 50px 100px  设置宽为50px,高为100px
background-repeat: no-repeat  设置背景图片不平铺
background-repeat: repeat-x   设置背景图片横向平铺
background-repeat: repeat-y   设置背景图片纵向平铺
background-position: 0 0   背景图片的坐标
background-position-x: 50  图片到左边的距离为50
background-position-y: 50   图片到上边的距离为50

二、盒子模型

CSS 盒子模型本质上是一个包括边框、外边距、内边距和实例内容的盒子

盒子的实际大小是由外边距、内边距、内容决定的

1 Margin(外边距)    作用： 清除边框外的区域，外边距是透明的
2 Border(边框)      作用： 围绕在内边距和内容外的边框
3 Padding(内边距)   作用： 清除内容周围的区域，内边距是透明的
4 Content(内容)     作用： 盒子的内容，显示文本和图像

类比：如果把盒子模型看作是一个生活中的快递，那么内容部分等同于你买的实物，内边距等同于快递盒子中的泡沫，边框等同于快递盒子，外边距等同于两个快递盒子之间的距离。

1. 边框

border : 2px solid red;

顺序不可以更改
也可以单独设置上下、左右边框

设置边框圆角

border-redius: length;

length：可以是 数值 + px ，或者是百分比
还可以单独设置某个圆角，如上左角：border-top-left-radius

border-width	边框粗细，单位为`px`
border-style(边框样式)	`solid(`实线边框，最常用)
	`dashed(`虚线边框)
	`dotted(`点线边框)
border-color	边框颜色

2. 外边距

外边距即盒子与盒子之间的外部距离，可以单独设置上下左右外边距，也可以简写：

margin: top right bottom left;   分别设置上下左右外边框

margin: top left-right bottom;   设置上、左右、下外边框

margin: top-bottom left-right;   设置上下、左右外边框

外边距典型的应用：设置元素居中显示

前提：该元素必须设置width
margin: 0 auto：上下为0，左右居中

3. 内边距

内边距即盒子的内部距离，可以单独设置上下左右内边距，也可以简写：

padding: top right bottom left;   分别设置上下左右外边框

padding: top left-right bottom;   设置上、左右、下外边框

padding: top-bottom left-right;   设置上下、左右外边框

4. HTML元素分类

（1）块级元素

属性：display:bloc

特点：
- 每个块级元素都独占一行，并且其后的元素也另起一行
- 可设置元素的高度、宽度、行高以及顶和底边距
- 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）

常用块状元素：<div>、<p>、<h1> - <h6>、<ol>、<ul>、<dl>、<table>、<form>

（2）行内（内联）元素 

属性：display:inline

特点：
- 不单独换行，和其它元素在一行上
- 不可设置元素的高度宽度和顶部、底部的边距
- 元素的宽度就是它包含的文字或图片的宽度，不可改变

常见行内元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
- var用于定义变量，code用于定义代码，cite定义作品的标题

（3）行内块级元素

属性：display:inline-block

特点：
- 同时具备内联元素、块状元素的特点
- 和其他元素均在一行上
- 元素的宽度、高度、行高等边距都可设置
常见inline-block元素：<img>、<input>

三、选择器

简单选择器

1. 标签选择器

是以 div、span、p等标签作为选择器

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

	
<p>我是段落</p>
<h1>我是标题</h1>

2. id选择器

#colorRed {} ，拥有该id样式的那个标签就拥有该样式（唯一）

注意：id的名称只能由字母/数字/下划线(a-z 0-9 _)组成，且不能以数字开头

<style>
        #identity1{
            color: red;
        }
</style>


<p id="identity1">必成高富帅</p>

3. 类选择器

.colorRed {}，为标签添加该类就可以添加该样式

<style>
        .para1{
            font-size: 100px;
        }
        .para2{
            font-style: italic;
        }
</style>


<p class="para1 para2">我是段落</p>

4.通配符选择器

* {}，作用范围是整个页面，一般用作CSS初始化

格式：

*{ 属性: 值;}

复合选择器

1. 后代选择器

格式：

标签名称1 标签名称2{ 属性: 值;}

例子：

<style>
	    div ul li p{
	        color: red;
	    }
	</style>
	
	<div>
	    <ul>
	        <li>
	            <p>段落</p>
	        </li>
	        <li>
	            <p>段落</p>
	        </li>
	    </ul>
	</div>

2. 子元素选择器

格式：

先找到所有叫做"标签名称1"的标签, 然后在这个标签中查找所有直接子元素叫做"标签名称2"的元素

标签名称1>标签名称2{ 属性: 值;}

例子：

	<style>
        #identity>p{
            color: pink;
        }
    </style>
	
	<div id="identity">
	    <p>段落</p> 
	    <p>段落</p> 
	    <ul>
	        <li><p>段落</p></li>
	    </ul>
	</div>

3. 交集选择器

给所有选择器选中的标签设置属性

格式：

选择器1,选择器2{ 属性: 值;}

例子：

 <style>
        .ht,.para{
            color: red;
        }
 </style>

<h1 class="ht">标题</h1> 
<p class="para">段落</p>

4. 伪类选择器

伪类选择器就是向某个选择器添加特殊的效果，其格式就是选择器后面加上冒号(:)

a:link { ... };      选择所有未被访问的链接 
a:visited { ... };   选择所有已被访问的链接 
a:hover { ... };     选择鼠标指针位于其上的链接 
a:active { ... };    选择活动链接(鼠标按下未弹起的链接)

gym21

关注

1
点赞
踩
0

收藏

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

一、CSS基础1.概述CSS：Cascading Style sheets，级联/层叠样式表CSS分为两部分——CSS选择器和CSS属性。⽤于定义如何显⽰HTML元素通常保存在外部.css⽂件中，编辑此⽂件就能改变页⾯整体外观 2.语法h1 {color:red; font-size:14px;}3.引入方式行内样式：写在标签元素里面，以style=""形式，写在<head></head>中，优先级最高。（不...
复制链接

扫一扫

专栏目录