css学习

zzkzzkha

已于 2022-09-05 14:56:26 修改

阅读量320

点赞数 2

文章标签： css html css3

于 2022-09-04 16:41:06 首次发布

本文链接：https://blog.csdn.net/zzkzzkha/article/details/126643698

版权

前言

提示：这里可以添加本文要记录的大概内容：

Java 程序员两天了解css基础知识,主要是css基础，适合css入门和想快速了解css的朋友
学习过程：
1.css是什么
2.css怎么用
3.css 选择器（重难点）
4.美化网页（文字，阴影，超链接，列表，渐变等）
5.盒子模型
6.浮动
7.定位
8.网页动画

一、css是什么？

1.概念

层叠样式表(英文全称：Cascading Style Sheets)
简单来说就是补充HTML，进一步修饰网页。

2.发展史

css1.0
css2.0 DIV(快)+CSS
css2.1 浮动，定位
css3.0 圆角，阴影，动画，浏览器兼容性…

3.CSS的优势

1.内容与表现分离（一般css文件内容在单独的css文件夹下，HTML在使用时直接引用，让代码便于阅读）
2.结构统一，可复用。
3.样式丰富。
4.利用SEO，容易被搜索引擎收录。

二、基本内容

1.三种导入方式

行内样式：
直接写在标签使用的时候，和HTML混在一起（一般不推荐使用）

<body>
<p style="background-color: aliceblue">hello world</p>
</body>

内部样式：
直接将style内容写在使用的HTML文件下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css练习</title>

    <style>
        h1{
            background-color: antiquewhite;
        }
    </style>
</head>

外部样式：
单独建立css的文件夹来存放样式相关文件，使css和HTML代码相对分离，方便阅读。在HTML文件中通过一般通过link链接的方式使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css练习</title>

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

拓展：导入式，通过import的方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css练习</title>

    <style>
        @import url("css/css.css");
    </style>
</head>

注意：
如果一个标签使用的样式被三种方式导入，则按就近原则。如行内样式一般离我们使用的标签最近，就优先使用行内样式所声明的样子。外部样式和内部样式就是引用的位置谁更进了。如下就是优先使用外部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css练习</title>


    <style>
        p{
            background-color: #8474ff;
        }
    </style>
    <link rel="stylesheet" href="css/css.css">
    
</head>

2.选择器（重点）

2.1 常用选择器

选择器就是定位到页面中我们需要修改或者调整的位置。

1.标签选择器:声明之后，页面上的所有该类标签都会应用。声明方法：标签名{ }

<style>
        p {
            text-align: center;
            color: red;
        }
</style>

2.类选择器：通过class 关键字进行引用。声明方式：.类名{ } 这样每个控件可以相应的选择自己喜欢的样式，且可以跨标签。

.center {
  text-align: center;
  color: red;
}

<body>
<p class="center">hello world</p>
</body>

3.id选择器：通过关键字id进行引用。声明方式：#id{ } 和类选择器类似，只是id选择器只能被引用一次，有标签用到其他的标签就不能引用了。

#para1 {
  text-align: center;
  color: red;
}

<body>
<p id="para1 ">hello world</p>
</body>

如果一个标签同时引用了三种，则按优先级选择。
优先级：id > clss >标签

2.2 层次选择器

1.后代选择器：在某个元素的后面的所有标签。
如下是body下面的所有 P标签都被声明了。

<style>
        body p{
            background-color: #a2ffbf;
        }
 </style>

2.子选择器：只有下面的一代，儿子

<style>
        body p{
            background-color: #a2ffbf;
        }
 </style>

3.相邻兄弟选择器：选择同辈的该标签下方的一个标签。如下：某个类下方的第一个p标签，所有h1标签下方的第一个P标签。

.class + p {
margin-top:50px;
}

h1 + p {
margin-top:50px;
}

4，通用选择器：和相邻兄弟选择器相比，会选择下方的所有兄弟元素。

h1 ~p{
            background-color: #a2ffbf;
}

2.3结构伪类选择器

有的标签存在上下级关系，如表格。这时可以通过父标签子标签：first-child{ } 去选择子标签中的第一个或最后一个元素。

ul li:first-child{
            background-color: #ffcf7e;
        }

还有 P标签：nth-of-type(n) 的方式可以获取该标签的父标签下方的第n个标签。注意如果第n个标签不是P标签则不用产生效果

p:nth-of-type(1){
            background-color: #ffcf7e;
        }

P标签：p:nth-child(n) 和上面类似，只是只会关注父标签下方的P标签，选出第n个P标签。

p:nth-child(2){
            background-color: #ffcf7e;
        }

2.4属性选择器（常用）

将id 和class 结合
属性选择器可以根据元素的属性及属性值来选择元素。可以选中某一类标签中特定条件的标签。
标签名[筛选条件][筛选条件]

a[id=1][title=zzk] {
color:red;
}

3美化页面元素

有效的传递页面信息
美化页面，吸引用户
提高用户体验

span标签通常用来强调，突出显示内容。

3.1字体样式

关于字体的常用属性：

/*font-family:字体*/
/*fron-size :字体大小*/
/*font-weight :字体粗细*/
/*color :字体颜色*/

body{
    font-family: "Arial Black" , 楷体;
    color: #84ff61;
}

h1{
    font-size: 50px;
}

.pp{
    font-weight: 900;
}

3.2文本样式

1：颜色，color rgb rgba
2: 对齐方式，text-align =center
3: 首行缩进，rext-indent:2em
4: 行高，line-height
5: 装饰 text-decoration
6 : 文本图片水平对齐 : vertical-align :middle。

/*颜色：*/
/*    rgb:0-F*/
/*    rgba:增加的透明度 0-1*/

h1{
    color: rgba(1,255,255,0.5);
}

/*text-align:排版，居中。*/
text-indent:2em 段落首航缩进两空格
height ：300px
line-heigth:300px 行高和块的高度一致，就可以居中。

p{
    text-align: center;
    height: 300px;
    line-height: 300px;
}

/*水平对齐需要参照物，所以需要两个标签*/
img,span{
    vertical-align: middle;
}

3.3超链接伪类

就是鼠标悬浮，点击这个标签的内容呈现的不同状态。
提供 标签：状态 的方式进行定义。

<style>
    /*默认的颜色*/
    a{
        text-decoration: none;
        color: #ffcf7e;
    }

    /*鼠标悬浮的状态*/
    a:hover{
        color: green;
    }
    /*鼠标按住未释放的状态*/
    a:active{
        color: bisque;
        font-size: 300px;
    }
</style>

3.4图片背景相关

4盒子模型

4.1概念

一个标签主要有：margin（外边距）+ border（边框）+padding（内边距）
在这里插入图片描述

4.2border

border ：粗细，样式，颜色

#box{
    width: 300px;
    border: 1px solid red;
}

4.3内外边距

margin：0 (上下左右)
margin：0 (上下) 1px(左右)
margin: 0(上) 1px(下) 0(左) 1px(右)
盒子的计算方式（这个元素到底多大？）
margin + border + padding +内容宽度

   <title>黑盒模型</title>
    <style>
        .testform{
            width: 300px;
            background: beige;
        }

        .passwordtext{
            margin-left: 16px;
        }
        body{
            margin: 0;
        }

        form{
            margin: 100px auto;
        }

        h1{
            margin: 0;
            width: 300px;
            color: #ffcf7e;
            font-size: 20px;
            font-family: "Arial Black";
            padding: 5px 10px 5px 90px;
            /*上下右左*/
        }
        div input:nth-of-type(1){
            border:  2px dashed cadetblue;
        }

        form div:nth-of-type(3){
            font-size: large;
            width:100px ;
            padding-top: 10px;
            margin-left: 130px;
        }
    </style>


</head>
<body>

<form action="ListStudy.html" class="testform">
    <h1>会员登录</h1>
    <div>
        <span>用户名：</span>
        <input type="text">
    </div>
    <div>
        <span>密码：</span>
        <input type="password" class="passwordtext">
    </div>
    <div>
        <input type="submit">
    </div>
</form>

5 浮动

5.1 标准文档流

标志流就是元素默认的排版。块级元素（h1-h5,p ,div ,列表）独占一行（span , link …），行内元素会都挤在一行。
下图中右边就是标准文档流。
在这里插入图片描述

5.2 display

display 属性可以切换块级元素和行类元素的属性。
block 块元素
inline 行内元素
inline-block 保持块元素的大小等性质，但不再独占一行。

5.3 float

float 属性可以让该元素悬浮于父级背景之上。并且可以选择靠左和靠右悬浮。

***个人心得：***使用float属性的时候，会在上一个标准文档流（就是没使用float实现的标签）块级元素的下一行进行悬浮。
如果上一个标准文档流是行内元素：就会在上一行直接悬浮。
悬浮的元素不会占用行位置，如果后面有标准文档流，不管是块元素还是行内元素，都会直接在这一行开始显示。因为对于系统来说浮动元素并没有占用行。

建议敲代码试试，就知道了。