【CSS】一篇掌握CSS

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

一.导入方式

1.行内样式

2.内部样式

[3.1 overflow](#3.1 overflow)

一.导入方式

1.行内样式

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

html 复制代码

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

2.内部样式

在html的style标签内书写

html 复制代码

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

3.外部样式(常用)

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

html 复制代码

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

二.选择器

1.基本选择器(常用)

1.1标签选择器

html 复制代码

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

css 复制代码

h1{
    color: red;
}

1.2类选择器

css 复制代码

.class{
    color: blue;
}

1.3id选择器

css 复制代码

#id{
    color: black;
}

优先级

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

2.层次选择器

2.1后代选择器

body后面的所有p标签

2.2子选择器

body后面的第一代标签

2.3相邻兄弟选择器

下面的一个兄弟+

2.4通用兄弟选择器

下面的所有兄弟~

3.结构伪类选择器

4.属性选择器

格式

css 复制代码

标签[]{}

css 复制代码

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

css 复制代码

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;
    /*取消下划线*/
}

图片和文本对齐

html 复制代码

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

css 复制代码

img,span{
    vertical-align: middle;
}

显示效果

3.超链接伪类

鼠标悬停执行

css 复制代码

a:hover{
    color: red;
}

4.列表样式

css 复制代码

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

5.背景background

添加背景默认为全部平铺

css 复制代码

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

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

直接设置背景颜色

css 复制代码

a{
    background: red;
}

四.盒子模型

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

css 复制代码

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,就是左移)