【CSS】一篇掌握CSS

不是因为有了希望才去坚持,而是坚持了才有了希望

目录

一.导入方式

1.行内样式

2.内部样式

3.外部样式(常用)

二.选择器

1.基本选择器(常用)

1.1标签选择器

1.2类选择器

1.3id选择器

2.层次选择器

2.1后代选择器

2.2子选择器

2.3相邻兄弟选择器

2.4通用兄弟选择器

3.结构伪类选择器

4.属性选择器

三..美化网页

1.字体样式font

2.文本样式text

3.超链接伪类

4.列表样式

5.背景background

四.盒子模型

1.边距参数顺序

2.边框border

2.1圆角边框

五.浮动

1.display

2.float

3.黑框塌陷问题

3.1 overflow

4.display和float对比

六.定位position

1.相对定位relative

2.绝对定位absolute

3.固定定位fixed

4.图层z-index

---

一.导入方式

1.行内样式

在标签元素中,编写一个style属性,编写样式即可

<h1 style = "color : red">我是标题</h1>

2.内部样式

在html的style标签内书写

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

3.外部样式(常用)

在html内使用link标签导入外部css文件,在外部书写css代码

<link rel="stylesheet" href="css/style.css">

二.选择器

1.基本选择器(常用)

1.1标签选择器

<h1 class = 'class' id = 'id'>我是标题</h1>

h1{color: red;
}

1.2类选择器

.class{color: blue;
}

1.3id选择器

#id{color: black;
}

优先级

id选择器>类选择器>标签选择器(上面的h1标签显示为黑色)

2.层次选择器

2.1后代选择器

body后面的所有p标签

2.2子选择器

body后面的第一代标签

2.3相邻兄弟选择器

下面的一个兄弟+

2.4通用兄弟选择器

下面的所有兄弟~

3.结构伪类选择器

4.属性选择器

格式

标签[]{}

a[id]{}
/*a标签中存在id属性的元素*/
a[id = links]{}
/*a标签中id是links的元素*/
a[id *= links]{}
/*a标签中id包含links的元素*/
a[id ^= links]{}
/*a标签中id以links开头的元素*/
a[id $= links]{}
/*a标签中id以links结尾的元素*/

类似于正则表达式

三..美化网页

1.字体样式font

2.文本样式text

a{color: rgba(0,255,255,0.9);/*0.9是透明度*/text-align: center;/*文字左右居中*/text-indent: 2em;/*首行缩进2格*/height: 300px;line-height: 300px;/*字体高度和整体高度一直,就会上下居中*/text-decoration: none;/*取消下划线*/
}

图片和文本对齐

<p><img src="../resources/image/1.jpg" alt=""><span>我是奶龙</span>
</p>

img,span{vertical-align: middle;
}

显示效果

3.超链接伪类

鼠标悬停执行

a:hover{color: red;
}

4.列表样式

ul li{list-style: none;/*去掉圆点*/list-style: circle;/*空心圆*/list-style: decimal;/*有序数字*/list-style: square;/*正方形*/
}

5.背景background

添加背景默认为全部平铺

a{background: red url("resources/image/1.jpg") 270px 10px no-repeat;
}

颜色,图片地址,图片位置,平铺方式no-repeat就是不平铺,如下图

直接设置背景颜色

a{background: red;
}

                           

四.盒子模型

在网页中,每个元素都是一个盒子模型,网页会有默认的边距大小,所以一般需要初始化边距为0

h1,ul,li,a,body{margin: 0;/*外边框设置为0*/padding: 0;/*内边框设置为0*/text-decoration: none;/*消除下划线*/
}

1.边距参数顺序

每个盒子是一个矩形,他有四个边,所以设置内外边距的时候会有四个参数

margin: 10px 10px 10px 10px;

如果传入四个参数是上左下右(顺时针旋转)
传入两个参数是上下和左右
传入一个参数就是全部

自动设置边距使元素居中auto

margin: 0 auto;

2.边框border

border : 3px solid red;   (solid是实线,dashed是虚线)

2.1圆角边框

圆形 = 宽度的一半

五.浮动

在一个网页中,每个元素会出现在不同的位置,我们要对这些元素进行布局,就需要用到浮动

这些元素有默认的布局方式,我们要改变他们来手动布局

1.display

这里我们需要引入一个抽象概念,我们可以叫他黑框

我们在写html代码的时候,会写很多div,把一些元素放到div中,这个div就是一个边界,使用display改变元素属性的时候,不会使他离开这个"黑框div"

display : block;(块元素)
display : inline;(行内元素)
display : inline-block;(既是行内元素也是块元素),是块元素但是可以在一行

行内元素不能设定height和width,必须要变成块元素才可以设定

导航栏就是ul li标签变成行内元素

2.float

浮动就是把这个块元素单独飘起来,会飘出黑框外

float : left; 左浮
float : right; 右浮

浮动会导致元素挤在一起,所以我们需要清除浮动clear both;

既有浮动效果,也要有块元素效果(就让他排下去,不要挤在一起),就要清除浮动

3.黑框塌陷问题

我们知道,浮动会飘出黑框外,我们不想出现这种情况就要解决黑框塌陷问题

推荐使用第四种方法

3.1 overflow

overflow : scroll 规定文本或图片超过了高度,加滚动条(没人会用这个)

overflow : hidden 规定文本或图片超过了高度,会隐藏(知道这个就行)

4.display和float对比

六.定位position

我们对一个网页中的元素进行布局的时候,还需要设置他们具体的位置,所以就要用到定位

1.相对定位relative

相对于自己原来的位置偏移,仍然在黑框中,没有塌陷,原来的位置会被保留
position : relative

top : -20px;  (距离上面-20px,就是上移)
left : 20px;    (距离左边20px,就是右移)
bottom : -10px(距离下面-10px,就是下移)
right : 20px(距离右边20px,就是左移)

2.绝对定位absolute

一般都是相对于父元素定位

给父级元素加上相对定位,就会相对于父级元素定位

不给父元素加相对定位就会相对于浏览器定位,滚动滑轮位置会变(初始浏览器大小)

给父元素加上相对定位relative

自身相对于父元素左移30px

3.固定定位fixed

这里设置第一个div元素相对于浏览器位于初始的右下角,但是滚动滑轮位置会变
设置第二个div元素固定定位在浏览器右下角,滚动滑轮位置不会变

4.图层z-index

我们需要把一些块元素堆叠的时候,就需要使用z-index来决定谁在上谁在下

练习

HTML代码

CSS代码

---

opacity透明度