CSS学习

挽天技术

已于 2024-05-15 23:58:57 修改

阅读量937

点赞数 17

分类专栏： Web 大一学java 文章标签： css 学习前端

于 2024-05-15 23:52:16 首次发布

本文链接：https://blog.csdn.net/2403_82385265/article/details/138922004

版权

大一学java 同时被 2 个专栏收录

85 篇文章 2 订阅

订阅专栏

Web

8 篇文章 0 订阅

订阅专栏

CSS学习

对于前端开发来说，把内容和样式分离，提高开发效率

大纲

基本语法

具体案例

CSS基本语法

css语法可以分为两部分：(1) 选择器 (2) 声明
在这里插入图片描述
CSS 注释：/注释内容/,类似Java

代码位置

放在head标签里面(style部分)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style type="text/css">
        
    </style>
</head>
<body>

</body>
</html>

设置边框

<style type="text/css">
        div{
            border: 1px dashed blue;
        }
    </style>

也可以使用border-width设置宽度，顺时针设置

设置颜色

这里的颜色设置有三种方式
在这里插入图片描述

设置宽高度

这里高度和宽度除了可以使用像素，还可以使用百分比(占页面的多少)
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style type="text/css">
        div{
            color: black;
            width: 300px;
            height: 200px;
            border: 1px dashed blue;
            background-color: aqua;
            font-size: 40xp;
            font-weight: bold;
            font-family: "Arial Narrow";
        }
    </style>
</head>
<body>
<div>烦死了</div>
</body>
</html>

设置背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style type="text/css">
        div{
            background-color: aqua;
        }
    </style>
</head>
<body>
<div>烦死了</div>
</body>
</html>

设置字体

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style type="text/css">
        div{
            font-size: 40xp;
            font-weight: bold;
            font-family: "Arial Narrow";
        }
    </style>
</head>
<body>
<div>烦死了</div>
</body>
</html>

DIV居中

使用margin设置元素的边距，auto表示自动调配

<style type="text/css">
        div{
            margin-left: auto;
            margin-right: auto;
        }
    </style>

文本居中

当然也可以设置靠左和靠右

<style type="text/css">
        div{
            text-align: center;
        }
    </style>

超链接去下划线

去除超链接的下划线

<style type="text/css">
        a{
            text-decoration: none;
        }
    </style>

表格细线

<style type="text/css">
        table,td,tr{
            width: 300px;
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>

列表去修饰

<style type="text/css">
        ul{
            list-style: none;
        }
    </style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style type="text/css">
        div{
            color: black;
            width: 300px;
            height: 200px;
            border: 1px dashed blue;
            background-color: aqua;
            font-size: 40xp;
            font-weight: bold;
            font-family: "Arial Narrow";
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
        a{
            text-decoration: none;
        }
        table,td,tr{
            width: 300px;
            border: 1px solid black;
            border-collapse: collapse;
        }
        ul{
            list-style: none;
        }
    </style>
</head>
<body>
<div>烦死了</div>
<a href="https://www.baidu.com">点击前往</a>
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
<ul>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
</ul>
</body>
</html>

CSS三种使用方式

直接在头head里面使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
<!--    在head里面使用-->
    <style type="text/css">
        div{
            color: black;
            width: 300px;
            height: 200px;
            border: 1px dashed blue;
        }
    </style>
</head>
<body>
<div>烦死了</div>
</body>
</html>

行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
</head>
<body>
<!--直接在标签里面设置style-->
<div style="border: black;width: 300;color: blue" >烦死了</div>
</body>
</html>

引入外部CSS文件(推荐使用)引入位置还是在head
这是主Html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
<!--    引入我们编写的样式表-->
    <link rel="stylesheet" href="example.css">
</head>
<body>
<div >烦死了</div>
</body>
</html>

这是样式表

div{
    width: 300px;
    height: 200px;
    color: bisque;
}

选择器

元素选择器

作用于全部
在这里插入图片描述

ID选择器

作用于唯一
对有特殊要求的标签进行修饰
首先要对特殊需求的标签定义一个id
再指定id设置样式
注意：设置id时，id唯一
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
<style type="text/css">
    /*通过指定id来设置属性*/
    /*注意设置的id唯一，不能相同*/
    #cs1 {
        color: blue;
    }
    #cf1 {
        color: aqua;
    }
</style>
</head>
<body>
/*通过指定id来设置属性，id唯一*/
<div id="cs1">烦死了</div>
<div id="cf1">id选择器</div>
</body>
</html>

类选择器

作用于部分
用来修饰某一类有相同需求的标签
class可以重复
下图是.class
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
<style type="text/css">
    div{
        color: black;
    }
    /*通过指定class来设置属性*/
    /*设置的class不唯一*/
    .t2 {
        color: blue;
    }
</style>
</head>
<body>
<div >烦死了</div>
<!--通过设置class，让下面两个div是一类的样式-->
<div class="t2">类选择</div>
<div class="t2">类选择</div>
</body>
</html>