CSS要点总结

淳平讲Java

已于 2024-02-01 23:41:13 修改

阅读量429

点赞数 10

文章标签： css 前端

于 2024-01-31 22:59:11 首次发布

本文链接：https://blog.csdn.net/m0_75274193/article/details/135963515

版权

一、CSS 快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 快速入门</title>
    <!-- 解读
    1. 在 head 标签内，出现了 <style type="text/css"></style>
    2. 表示要写 css 内容
    3. div{} 表示对 div 元素进行样式的指定
    4. width: 300px(属性); 表示对 div 样式的具体指定, 可以有多个
    5. 如果有多个，使用; 分开即可, 最后属性可以没有; 但是建议写上
    6. 当运行页面时，div 就会被 div{} 渲染，修饰
    -->
    <style type="text/css">
        div {
            width: 200px;
            height: 100px;
            background-color: gold;
        }
    </style>
</head>
<body>
<!--先使用传统的方法-->
<div>hello, 北京</div>
<br/>
<div>hello, 上海</div>
<br/>
<div>hello, 天津</div>
<br/>
<div>hello, 深圳</div>
<br/>
</body>
</html>

二、CSS常用样式

1.常用样式-div样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div样式</title>
    <style type="text/css">
        div {
            width: 400px;
            height: 40px;
            border: 1px solid green; /*3项缺一不可*/
            font-size: 40px;
            font-family: 华文新魏;
            font-weight: bold;
            margin-left: auto;
            margin-right: auto; /*这两项调节的是div样式*/
            text-align: center;
        }
    </style>
</head>
<body>
<div>你好，我是淳平讲Java</div>
</body>
</html>

2.常用样式-超链接去下划线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接去掉下划线</title>
    <style type="text/css">
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
<a href="http://www.baidu.com">点击到百度</a>
</body>
</html>

3.常用样式-表格细线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格细线</title>
    <style type="text/css">
        /*
            设置边框 : border: 1px solid black
            将边框合并: border-collapse: collapse;
            指定宽度： width
            设置边框： 给 td, th 指定即可 border: 1px solid black;

            解读
            1. table, tr, td 表示组合选择器
            2. 就是table 和 tr 还有 td ,都用统一的样式指定, 可以提高复用性
         */
        table, tr, td {
            width: 300px;
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td align=center colspan="3">星期一菜谱</td>
    </tr>

    <tr>
        <td rowspan=2>素菜</td>
        <td>青草茄子</td>
        <td>花椒扁豆</td>
    </tr>
    <tr>
        <td>小葱豆腐</td>
        <td>炒白菜</td>
    </tr>
    <tr>
        <td rowspan=2>荤菜</td>
        <td>油闷大虾</td>
        <td>海参鱼翅</td>
    </tr>
    <tr>
        <td>红烧肉</td>
        <td>烤全羊</td>
    </tr>
</table>

</body>

</html>

4.常用样式-列表去修饰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表去修饰</title>
    <style type="text/css">
        ul {
            /*说明:list-style:none表示去掉默认的修饰*/
            list-style: none;
        }
    </style>
</head>
<body>
<ul>
    <li>三国演义</li>
    <li>红楼梦</li>
    <li>西游记</li>
    <li>水浒传</li>
</ul>
</body>
</html>

三、CSS 使用三种方式

1.方式 1：在标签的 style 属性上设置 CSS 样式


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在标签的 style 属性上设置CSS样式</title>
</head>
<body>
<div style="width: 300px;height: 100px;background-color: red">hello, 北京</div>
<br/>
<div style="width: 300px;height: 100px;background-color: red">hello, 上海</div>
<br/>
<div style="width: 300px;height: 100px;background-color: red">hello, 天津</div>
<br/>
</body>
</html>

2.方式 2：在 head 标签中，使用 style 标签来定义需要的 CSS 样式（见之前代码）

3.方式 3：把 CSS 样式写成单独的 CSS 文件，再通过 link 标签引入

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

四、CSS选择器

1.元素选择器

2.ID 选择器

3.class 选择器（类选择器）

淳平讲Java

关注

10
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS要点总结

CSS快速入门CSS快速入门。
复制链接

扫一扫

CSS要点总结

一、CSS 快速入门

二、CSS常用样式

1.常用样式-div样式

2.常用样式-超链接去下划线

3.常用样式-表格细线

4.常用样式-列表去修饰

三、CSS 使用三种方式

1.方式 1：在标签的 style 属性上设置 CSS 样式

2.方式 2：在 head 标签中，使用 style 标签来定义需要的 CSS 样式（见之前代码）

3.方式 3：把 CSS 样式写成单独的 CSS 文件，再通过 link 标签引入

四、CSS选择器

1.元素选择器

2.ID 选择器

3.class 选择器（类选择器）

“相关推荐”对你有帮助么？