02-css入门

最新推荐文章于 2023-06-04 19:44:16 发布

阿凯6666

最新推荐文章于 2023-06-04 19:44:16 发布

阅读量288

点赞数

分类专栏：网络安全学习前端文章标签： css html css3

本文链接：https://blog.csdn.net/qq_56414082/article/details/128983275

版权

网络安全学习同时被 2 个专栏收录

70 篇文章 5 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

CSS 基础

CSS 简介：

让我们的网页更加丰富多彩，布局更加灵活自如。
CSS 最大的贡献：让 HTML 从样式中脱离，实现了 HTML 专注去做结构呈现，样式交给 CSS 。

作用
主要用于设置 HTML 页面中的文本内容 (字体、大小、对齐方式等 )
图片的外形 (宽高、边框样式、边距等 )以及版面的布局和外观显示
样式。
CSS 以 HTML 为基础，提供了丰富的功能，如字体、样式、背景的
控制及整体排版等，而且可以针对不同的浏览器设置不同的样式。

CSS 注释：

/ * 这 是 注 释 * /

一、如何导入使用CSS

在网页中使用css的方式有多种。

1. 内部样式表 (内嵌样式表）

通过标签的 style 属性来设置元素的样式

也称为内嵌式，将 CS S 代码集中写在 HTML 文档的 head 头部标签中，并且用 style 标签定义

<!--规范，<style> 可以编写css的代码，每一个声明，最好使用分号结尾    
例：
    <style>
        h1{
          color: aqua;  
        }
    </style>

缺点 :没有彻底分离结构与样式，效率是非常低下，并且对于后期的维护和扩展是一个非常大的考验。

2. 行内样式

<div style="属性1:值;属性2:值;"></div>

3. 外部样式表 (外链式 )

简介：也称链入式，是将所有的样式放在一个或多个以 . c s s 为扩展名的外部
样式表文件中，通过 l i n k 标签将外部样式表文件链接到 HTML 文档中。

外部写入语法：
        选择器{
            声明1 ;
            声明2 ;
            ....
        }

使用：

在使用外部样式时，需要在标签中通过标签导入外部的css文件。使用外部样式的好处：使html代码和css样式分离。

  <link rel="stylesheet" href="外部css文件的路径" />
  
rel:定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

href:定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。·

在这里插入图片描述

优先级

行内样式 > 内部样式 > 外部样式

因此在编写css代码时，统一使用外部样式的方式就能够解决这个问题。

二、CSS 基础选择器

作用：找到指定的HTM L页面元素，选择标签。

基础选择器分为三类。

标签选择器
类选择器
ID选择器

1.标签选择器

标签选择器（元素选择器）是指用H TM L标签名称作为选择器，按
标签名称分类，为页面中某一类标签指定统一的CSS样式。
作用：可以把某一类标签全部选择出来。
优点：快速为网页中同类型的标签统一样式
缺点：不能设计差异化样式。

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

  div{ /*页面中存在div标签，标签选择器*/}   /*为页面中所有的div标签设置样式*/
  
  a{} /*为页面中所有的a标签设置样式*/
  
  p{} /*为页面中所有的段落标签设置样式*/
  ....

2.类选择器

类选择器使用"."(英文点号)进行标识，后面紧跟类名。
语法：类名选择器
.类名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}

编写方式：
.类名{
  	/*css代码*/
  }
  

导入方式：
<标签名  class='类名'></标签>


案例：
.niubi{
	color :red;
}

<h1 class='niubi'>你好</h1>

注意：

类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)

长名称或词组可以使用中横线来为选择器命名。
不要纯数字、中文等命名，尽量使用英文字母来表示。
多类名选择器：各个类名中间用空格隔开。

特点：多次使用

3.id选择器

选择器使用#进行标识，后面紧跟id名
元素的id值是唯一的，只能对应于文档中某一个具体的元素。

格式：
#id名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}

导入：
<p id="id名"></p>

特点：只能使用一次

优先级：

ID选择器 > 类选择器 > 标签选择器

如果多个同类型的选择器对一个标签的一个样式(color)受影响时，浏览器按照从上到下，从左往右的顺序进行加载并渲染。

4.通配符选择器

通配符选择器用*号表示，就是选择所有的标签。它是所有选择器中作用范围最广的，能匹配页面中所有的元素。

*{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}

注意：会匹配页面所有的元素，降低页面响应速度，不建议随便使用

复合选择器（层次选择器）：

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

5.后代选择器

又称为包含选择器

用来选择元素或元素组的子孙后代

其写法就是把外层标签写在前面，内层标签写在后面，中间用 「空格」 分隔，先写父亲爷爷，再写儿子孙子

语法：

父级 子级 {属性:属性值; 属性:属性值;}
案例：
 <style>
        body h1{
            background: #000;
        }
    </style>

在这里插入图片描述

6.子选择器

子元素选择器只能选择作为某元素子元素 (亲儿子 )的元素。

其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接；

语法：

/*包含在里面的元素都会被选择*/
父级>子级 {属性:属性值; 属性:属性值;}

body>h1 {
            background: red;
        }

7.相邻兄弟选择器

/*匹配和标签同级别的下面一个的标签节点*/  
.class+标签{ 
 }
/*只有一个，相邻（向下）*/

8.通用兄弟选择器

 /*匹配当前选择元素向下的所有兄弟元素*/  
.class~标签{
  	属性：属性值；
  }

9.结构伪类选择器

-伪类用来描述一个元素的特殊状态

一般请情况下，使用

标签 空格：动作 {
属性：属性值；
}

常见动作有：

排序：

:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个子元素
特殊值： n 所有的

静态伪类: 只能用于超链接的样式
1. :link 超链接点击之前
2. :visited 链接被访问过之后
  
  以上两种样式，只能用于超链接
动态伪类：针对所有标签都适用的样式

:hover “悬停”：鼠标放到标签上的时候
:active “激活”：鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

我们经常看到一些网页，可以让鼠标的样式在其中发生改变，也就是说，我们这种标签，是对于鼠标产生效果。

10.属性选择器

属性选择器是通过元素的属性及属性值来选择元素的。

属性选择器的用法。

1.第一种用法

作用：选择含有指定属性的元素。

语法：[属性名]{}


案例：
<style>
/* 第一种用法：选择含有指定属性的元素。
     语法：[属性名]{} */
     
[title]{
       color:red;
      }
</style>
  /*选择属性名所有为title,设置字体颜色红色  */

2.第二种用法

作用：选择含有指定属性及指定属性值的元素。

语法：[属性名=属性值]{}

案例：
 <style>
 /* 第二种用法：选择含有指定属性及指定属性值的元素。
    语法：[属性名=属性值]{} */

        [title=ab]{
            color: green;
        }
    </style>

  /*选择属性名为title和属性值为ab的元素 ,设置字体颜色绿色 */

3.第三种用法

作用：选择含有指定属性及指定属性之开头的元素。

语法：[属性名^=属性值]{}

^为正则表达式表示行首，也可以更改

例如：

选择含有指定属性及指定属性值结尾的元素

语法：[属性名$=属性值]
作用：选择含有指定属性，只要含有某个属性值的元素。

语法：[属性值*=属性名]{}

 /* 第三种用法：选择含有指定属性及指定属性之开头的元素。
                语法：[属性名^=属性值]{}  */
       
        [title^=ab]{
            background-color: yellow;
        }
 /* 选择属性名为title和属性值以ab开头的元素，设置背景色黄色 */

4.第四种用法：

作用：选择含有指定选择器及指定属性之开头的元素。

语法：标签名[选择器=选择器值]{}

案例：
a[id=first]{
	backgroud : red;
}

三、font 字体样式

简介：

span标签：重点要突出的字，使用span套起来。约定俗成的。

常见属性值：

font-size属性用于设置字号(字体大小) 谷歌浏览器默认的文字大小为16px。 p{font-size:20px;}
font-family 属性用于设置哪一种字体。 p{font-family:"微软雅黑";}

font-weight 属性值定义字体粗细

属性值描述normal默认值(不加粗的)
bold定义粗体(加粗的)

使用数字也可以：
100~900 
400等同于normal，而700等同于bol d(数字表示粗细用的多)

…

font:综合设置字体样式

选择器 {font:font-style 
font-weight 
font-size/line- height
font-family;}

注意：使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开
其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性，否则font属性将不起作用。

四、文本样式

[1.颜色 color]

color 属性用于定义文本的颜色

实际工作中，用16进制的写法是最多的，且我们更喜欢简写方式比如#f0代表红色。

表示表示	属性值
预定义的颜色值	red，green，blue，pink …
十六进制	#FF0000，#FF6600，#29D794
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

[2.排版 text-align]

text-align属性用于设置文本内容的水平对齐方式，相当于html中的align对齐属性。

注意：是让盒子里面的文本内容水平居中，而不是让盒子居中对齐

其可用属性值如下：

属性	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

[3.链接修改装饰效果 text-decoration]

text-decoration,通常我们用于给链接修改装饰效果

值	描述
none	默认。定义标准的文本。取消下划线（最常用）
underline	定义文本下的一条线。下划线也是我们链接自带的（常用）
overline	定义文本上的一条线。（不用）
line-through	定义穿过文本下的一条线。（不常用）

[4.首行缩进 text-indent]

text-indent属性用于设置首行文本的缩进

其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值。
建议使用em作为设置单位。

1em 就是一个字的宽度。如果是汉字的段落，1em 就是一个汉字的宽度。

p {
      /*行间距*/
      line-height: 25px;
      /*首行缩进2个字  em  1个em 就是1个字的大小*/
      text-indent: 2em;  
 }

[5.设置行间距 line-height]

line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。

line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px

一般情况下，行距比字号大7--8像素左右就可以了。
line-height: 24px;

CSS外观属性总结

属性表示注意点
color 颜色我们通常用十六进制比如而且是简写形式 #fff
line-height 行高控制行与行之间的距离
text-align 水平对齐可以设定文字水平的对齐方式
text-indent 首行缩进通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration 文本修饰记住添加下划线 underline 取消下划线 none

属性	表示	注意点
color	颜色	我们通常用十六进制比如而且是简写形式 #fff
line-height	行高	控制行与行之间的距离
text-align	水平对齐	可以设定文字水平的对齐方式
text-indent	首行缩进	通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration	文本修饰	记住添加下划线 underline 取消下划线 none

五、列表样式

html中，有两种类型的html列表：

无序列表：列表项的标记使用特殊图形（如小黑点、小方框等）
有序列表：列表项的标记使用数字或字母

属性有：

list-style:
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形

例如：list-style: none;可以去掉列表中的原点或者数字。

CSS所有的列表属性

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

六、背景（background）

背景颜色

background−color属性定义了元素的背景颜色

background-color:颜色值;

一般情况下元素背景颜色默认值是（透明），我们也可以手动指定背景颜色为透明色。

背景图片

background−image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。（精灵图）也是一种运用场景）

background-image ： none | url (图片地址)
/*默认全部平铺*/

例如：
<style>
	div{
	background-image: usl(./a.png) ;
	}
</style>

参数值	作用
none	无背景图（默认的）
url	使用绝对或相对地址指定背景图像

背景平铺

如果需要在HTML页面上对背景图像进行平铺，可以使用background−repeat属性。

即图片在浏览器中是否出现多个。

常用：不平铺
background-repeat: no-repeat;

参数值	作用
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向平铺

背景图片位置

利用background−position属性可以改变图片在背景中的位置。

background-position: x值 y值；

参数代表的意思是：x坐标和y坐标。

参数值	作用
length	百分数或由浮点数字和单位标识符组成的长度值
position	top、center、bottom、left、center、right 方位名词

七、盒子模型

盒子的组成

在这里插入图片描述

分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。

会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。

1. 边框属性 boder

border可以设置元素的边框。

边框有三部分组成：边框宽度(粗细) ，边框样式，边框颜色

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

边框样式 border-style 可以设置如下值：

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线

例如：border：1px solid red;

2. 外边距 margin

外边距的妙用：可以居中元素。

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

外边距可以让块级盒子水平居中的两个条件：

盒子必须指定了宽度（width）。
盒子左右的外边距都设置为 auto 。

margin-left: auto;   
margin-right: auto;
margin: auto;
margin: 0 auto;

3.内边距 padding

内边距的使用方式

padding 属性用于设置内边距，即边框与内容之间的距离。

属性	作用
padding-left	左外边距
padding-right	右外边距
padding-top	上外边距
padding-bottom	下外边距

在这里插入图片描述

4.圆角边框 border-radius

规则：

border-radius : 左上角右上角右下角左下角 ;

情况如下：

有四个值时 : 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。

位三个值时 : 第一个值为左上角 , 第二个值为右上角和左下角，第三个值为右下角。

只有两个值时 : 第一个值为左上角与右下角，第二个值为右上角与左下角

一个值：四个圆角值相同

在这里插入图片描述

例如：改变图片为⚪图
img{
border: 10px solid red;
border-radius: 50px ;
}

5.阴影 box-shadow

语法：

box-shadow ：水平位置 垂直位置 模糊距离   阴影颜色..

例如：
box-shadow: h-shadow v-shadow blur spread color inset;

在这里插入图片描述

八、display 属性

disaply是可以将块级元素转化成行内元素

display 属性设置元素是否被视为块或者内联元素以及用于子元素的布局，例如流式布局、网格布局或弹性布局。

形式上，display 属性设置元素的内部和外部的显示类型。

1. display: none;`
隐藏元素，元素不会被显示，不占据文档空间。
2.display: block;：
将元素转换为块级元素。

3.display: inline;：
将元素转换为行内元素。

4.display: inline-block;：
将元素转换为行内块元素。

将对象呈现为 inline 对象，但是对象的内容作为 block 对象呈现。之后的内联对象会被排列在同一行内。使其既具有 block 的宽度高度特性又具有 inline 的同行特性。

5.display: flex;：
将对象作为弹性伸缩盒显示。

九、CSS浮动

什么是浮动？

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法：

选择器{float：属性值;}

属性值描述：none为元素不浮动（默认值）
left 元素向左浮动
right 元素向右浮动

例如：
.layer01 {
    border: 1px dashed red;
    display: inline-block;
float: left;
}

缺点：浮动元素会脱离标准流（脱标：浮动的盒子不再保留原先的位置），改变排版位置。

为此要清除浮动

在这里插入图片描述

清除浮动的方法

选择器 { clear: 属性值 ; } 

clear为清除

属性值：
clear：left;
clear：right;
clear: both;  /*清除左右两边的浮动*/最常用

十、定位

为什么使用定位

将盒子定在某一个位置自由的漂浮在其他盒子(包括标准流和浮动)的上面。

边偏移

通过边偏移来移动位置的。

在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移；

定位模式 (position)

在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：

选择器 { position: 属性值; }
1

定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

值	语义
`static`	静态定位
`relative`	相对定位
`absolute`	绝对定位
`fixed`	固定定位

1.相对定位（relative）

相对于自己原来在标准流中位置来移动的
原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它

2.静态定位(static)

静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none，不要定位的时候用。

3. 绝对定位(absolute)

绝对定位是元素以带有定位的父级元素来移动位置

4.固定定位(fixed)

固定定位是绝对定位的一种特殊形式：（认死理型）如果说绝对定位是一个矩形那么固定定位就类似于正方形

完全脱标 —— 完全不占位置；

只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；

定位模式	是否脱标占有位置	移动位置基准	模式转换（行内块）	使用情况
静态static	不脱标，正常模式	正常模式	不能	几乎不用
相对定位relative	不脱标，占有位置	相对自身位置移动	不能	基本单独使用
绝对定位absolute	完全脱标，不占有位置	相对于定位父级移动位置	能	要和定位父级元素搭配使用
固定定位fixed	完全脱标，不占有位置	相对于浏览器移动位置	能	单独使用，不需要父级

css布局框架：

使用网址：https://www.ilayuis.com/doc/index.htm

https://panjiachen.github.io/vue-element-admin-site/zh/guide/

4.固定定位(fixed)

固定定位是绝对定位的一种特殊形式：（认死理型）如果说绝对定位是一个矩形那么固定定位就类似于正方形

完全脱标 —— 完全不占位置；

只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；

定位模式	是否脱标占有位置	移动位置基准	模式转换（行内块）	使用情况
静态static	不脱标，正常模式	正常模式	不能	几乎不用
相对定位relative	不脱标，占有位置	相对自身位置移动	不能	基本单独使用
绝对定位absolute	完全脱标，不占有位置	相对于定位父级移动位置	能	要和定位父级元素搭配使用
固定定位fixed	完全脱标，不占有位置	相对于浏览器移动位置	能	单独使用，不需要父级

css布局框架：

使用网址：https://www.ilayuis.com/doc/index.htm

https://panjiachen.github.io/vue-element-admin-site/zh/guide/

阿凯6666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
02-css入门

属性表示注意点color颜色我们通常用十六进制比如而且是简写形式 #fff行高控制行与行之间的距离text-align水平对齐可以设定文字水平的对齐方式首行缩进通常我们用于段落首行缩进2个字的距离 text-indent: 2em;文本修饰记住添加下划线 underline 取消下划线 nonefloat属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。选择器{float：属性值;
复制链接

扫一扫