CSS实战指南-优快云博客

本文链接：https://blog.youkuaiyun.com/kkkdjbb/article/details/114916143

1. Cascading Style Sheet 层叠级联样式表（css）

1.1 作用及优势

美化网页：字体、颜色、边距、高度宽度、背景图片、网页定位、网页浮动…

优势：

内容和表现分离
网页结构表现统一，可以实现复用
样式丰富
利用SEO，容易被搜索引擎收录

1.2 快速入门

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--在head处写，<style>可以编写CSS。建议html与css分离
    语法：选择器{
            声明1；
            ...
        }
    -->
    <style>
        h1{
            color: red;
        }
    </style>
</head>

推荐写法：
html和css分开写

2. 四种css导入方式

<!--优先级 就近原则-->

<!--1. 行内样式,使用style-->
<h1 style="color: red">1</h1>
<!--2. 内部样式-->
<head>
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<!--3. 外部样式 即html与css分文件写-->
<!--3.1 连接式-->
<link rel="stylesheet" href="../CSS/DEMO1.css">
<!--3.1 导入式 CSS2.1 特有-->
<style>
	@import url("../CSS/DEMO1.css")
</style>

3. 选择器

选择器作用：选择页面上的某一个或某一类元素

3.1 三种基本选择器

优先级: id选择器>class选择器>标签选择器

3.1.1 标签选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器，所有此类标签均会被选中（也是弊端）*/
        h1{
            color: rebeccapurple;
            background: #25ae70;
            border-radius: 24px;//圆边框
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>
<h1>学Java</h1>
<p>kan</p>
</body>

3.1.2 类选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器，  .class（类名称）
        好处，CSS样式可复用，直接将标签类名改为一样即可,且可跨标签使用
        */
        .one{
            color: red;
        }
        .two{
            color: antiquewhite;
        }
    </style>
</head>
<body>
<h1 class="one">学Java</h1>
<h1 class="two">学Java</h1>
<h1 class="one">学Java</h1>
<p class="two">1</p>
</body>

3.1.3 Id选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器 #id(id名称) id全局唯一*/
        /*优先级id选择器>class选择器>标签选择器*/
        h1{
            color: red;
        }
        .two{
            color: rgba(61, 133, 205, 0.13);
        }
        #one {
            color: aqua;
        }
    </style>
</head>
<body>
<h1 id="one">学Java</h1>
<h1 class="two">学Java</h1>
<h1 id="three">学Java</h1>
</body>

3.2 高级选择器

3.2.1 层次选择器

/*1.后代选择器*/
body p{
    background: aqua;
}
/*2.儿子选择器*/
body>p{
    color: #bf4747;
}
/*3.兄弟选择器(仅对下一个相邻兄弟作用)，不包括自己*/
.active + p{
    background: aqua;
}
/*4.通用选择器，同级且对下(作用)不对上，不包括自己*/
.active~p{
    background: aqua;
}

3.2.2 结构伪类选择器

/*选ul第一个元素*/
ul li:first-child{
    background: aqua;
}
/*选中p1: nth-child(1)->选中当前元素的父级下的第一个元素(且第一个元素必须为p1的标签，否则会失效)*/
p:nth-child(2){
    background: aquamarine;
}
/*选中当前元素的父级下的第二个p标签*/
p:nth-of-type(2){
    background: red;
}

3.2.3 属性选择器（常用）

/*存在id属性的操作           a[属性名/ 属性名 = 属性值(可用正则匹配)]{}
=绝对等于  *=包含此元素   ^=以此元素开头   $=以此元素结尾
*/
a[id]{
    color: beige;
}
a[class*="link"]{
    background: blueviolet;
}
a[href^=http]{
    background: blue;
}
a[href$=doc]{
    background: beige;
}

在这里插入图片描述

4. 美化网页元素

4.1 为什么要美化网页

有效传递页面信息
吸引用户
凸显主题
提高用户体验

span标签：重点要突出的字，使用span

<head>
<style>
        #kk{
            color: aquamarine;
            font-size: 20px;
        }
    </style>
</head>
<body>
    欢迎 <span id="kk">用户</span>
</body>

在这里插入图片描述

4.2 字体样式

<style>
/*
font-family 字体
font-size 字体大小
font-weight 字体粗细
color 颜色
*/
body{
font-family: 楷体, "Arial Black";
font: oblique border 12px "楷体"
}
</style>

4.3 文本样式

<style>
/*
颜色 单词  rgb() rgba(加上透明度0~1)
排版 text-align  center left right   水平
	text-indent 段落首行缩进 em(字数) px(像素)
	块高度height和行高line-height相等可实现上下居中
text-decoration: underline下划线  line-through中划线  overline上划线 none去掉下划线
*/
h1{
    color: rgba(0,255,255,0.5);
    text-align: center;
    text-decoration: underline;
}
.p1{
    text-indent: 2em;
}
.p2{
    background: aquamarine;
    height: 50px;
    line-height: 50px;
}
/*图片与字的水平对齐，要有参照物*/
img,span{
    vertical-align: middle;
}
</style>

4.4 文本阴影和超链接伪类

<style>
a{
text-decoration: none;
color: black;
}
/*伪类选择器 :hover :active*/
/*鼠标悬浮颜色*/
a:hover{
color: aquamarine;
font-size: 30px;
}
/*鼠标按下未释放状态*/
a:active{
color: blueviolet;
}
/*text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径   id不能有数字*/
#stream{
text-shadow: #1376d4 10px -10px 2px;
}
</style>

在这里插入图片描述

4.5 列表

在这里插入图片描述

4.6 背景

背景颜色和背景图片

<style>
div{
width: 800px;
height: 250px;
border: 1px solid red;
background-image: url("2.jpg");
/*默认是全部平铺的 repeat*/
}
/*水平平铺*/
.div1{
background-repeat: repeat-x;
}
/*只显示一个图片*/
.div2{
background-repeat: no-repeat;
}
/*颜色 图片 图形位置 平铺方式*/
.div3{
background: red url("2.jpg") 270px 10px no-repeat;
/*定位*/
/*background-position: 270px 10px;*/
}
</style>

在这里插入图片描述

4.7 渐变和动画

菜鸟教程：

https://www.runoob.com/css3/css3-gradients.html

body{
    background-image: linear-gradient(19deg,#21D4FD 0%,#B731FF 100%);
}

canvas非常好看动画效果：

https://www.html5tricks.com/category/html5-demo/page/8

5. 盒子模型

5.1 什么是盒子模型

在这里插入图片描述
盒子模型的大小 =

margin: 外边距 + padding: 内边距 + border: 边框 + 内容宽度

5.2 demo

<style>
/*body ul li a h1都有默认外边距，内边距。 规范*/
body,ul,li,a,h1{
    margin: 0;
    padding: 0;
    text-decoration: none;
}
h2{
    background: #ff600f;
    margin: 0;
    padding: 10px;
}
/*border 粗细 样式 颜色*/
/*margin: 上(top) 右(right) 下(bottom) 左(left)外边距；如果只写两个，则为上(下) 左(右)；auto自动对齐*/
#box{
    width: 300px;
    border: 2px solid aquamarine;
    margin: 100px auto;
}
form{
    background: #ff600f;
}
form input{
    border: 3px solid aqua;
}
</style>

在这里插入图片描述

5.3 圆角边框和阴影

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*border-radius 左上 右上 右下 左下 顺时针*/
img {
    border-radius: 50px;
    box-shadow: 10px 10px 90px blue;
}
</style>
</head>

<body>
	<div style="width: 250px;height: 250px;margin: 0 auto;">
		<img src="2.jpg" alt="" width=100px height=100px>
	</div>
</body>

在这里插入图片描述

6. 浮动

6.1 标准文档流

文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
在这里插入图片描述

6.2 display

<style>
/*display
block 块元素
inline 行内元素
inline-block 是块元素但可以在一行
none
*/
div{
    width: 100px;
    height: 100px;
    border: 1px solid fuchsia;
    display: inline;
}
span{
    width: 100px;
    height: 100px;
    border: 1px solid fuchsia;
    display: inline-block;
}
</style>

这是一种实现行内元素排列的方式，但方向不可控，更多情况下用float(浮动)，但无父级边框塌陷问题

6.3 float

在这里插入图片描述

让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。
可以实现盒子的左右对齐等等.
浮动最早是用来控制图片，实现文字环绕图片的效果。

6.4 解决父级边框塌陷问题（重点）

/*clear:
right 右侧不允许有浮动
left  左侧不允许有浮动
both  两侧不允许有浮动
 */

解决方案：

1 增加父级元素高度

#father{
    border: 1px solid #000;
    height: 1000px;
}

2 增加一个空的div标签在父级元素下(简单，但代码应避免空div)

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

3 overflow

#father{
    width: 200px;
    height: 200px;
    overflow: scroll;
    /*
    hidden 隐藏超出的部分
    scroll
     */
}

在这里插入图片描述

在父级元素添加overflow

#father{
    border: 1px solid #000;
    overflow: hidden;
}

4 在父类添加一个伪类after(推荐，不会改变源码，无副作用)

#father:after{
    content: '';
    display: block;
    clear: both;
}

7. 定位

7.1 相对定位

position: relative;
/*相对自己进行偏移，仍在标准文档流中，且原来的位置会被保留*/
top: -20px;
left: 20px;
right: 10px;
bottom: -20px;

在这里插入图片描述

7.2 绝对定位

position:absolute

1 没有父级元素定位的前提下，相对于浏览器定位

2 假设父级元素存在定位，会相对于父级进行偏移(常用)，并一直在父级内部

3 不在标准文档流中，原来的位置不会被保留

7.3 固定定位

position:fixed/*不会随着网页移动*/

7.4 z-index

z-index: 图层默认为0，最高无限

在这里插入图片描述

前端基础(CSS3)

文章目录

1. Cascading Style Sheet 层叠级联样式表（css）

1.1 作用及优势

1.2 快速入门

2. 四种css导入方式

3. 选择器

3.1 三种基本选择器

3.1.1 标签选择器

3.1.2 类选择器

3.1.3 Id选择器

3.2 高级选择器

3.2.1 层次选择器

3.2.2 结构伪类选择器

3.2.3 属性选择器（常用）

4. 美化网页元素

4.1 为什么要美化网页

4.2 字体样式

4.3 文本样式

4.4 文本阴影和超链接伪类

4.5 列表

4.6 背景

4.7 渐变和动画

5. 盒子模型

5.1 什么是盒子模型

5.2 demo

5.3 圆角边框和阴影

6. 浮动

6.1 标准文档流

6.2 display

6.3 float

6.4 解决父级边框塌陷问题（重点）

7. 定位

7.1 相对定位

7.2 绝对定位

7.3 固定定位

7.4 z-index