CSS基础入门

于 2022-11-18 12:38:08 发布
阅读量611 收藏
点赞数
分类专栏： javaWeb 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44981526/article/details/127920132
版权

CSS基础入门

1.官方文档

1.CSS 指的是层叠样式表* (Cascading Style Sheets)

2.地址: https://www.w3school.com.cn/css/index.asp

2.为什么需要 CSS

1.在没有 CSS 之前，我们想要修改 HTML 元素的样式需要为每个 HTML 元素单独定义样式属性，费心费力。所以 CSS 就出现了。

2.使用 CSS 将 HTML 页面的 内容与样式分离提高 web 开发的工作效率(针对前端开发)

3.CSS 可以让 html 元素(内容) + 样式(CSS)分离，更好的控制页面

image-20221118105043312

3.CSS快速入门

1.应用实例 simple_css.html, 使用 css 完成下面页面

  1. 需求: 创建simple_css.html 完成如下网页显示
<!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{} 渲染，修饰
		7. 小经验：在调试 css 时，可以通过修改颜色，或者大小来看
		8. css 的注释是 /* */ ,快捷键 ctrl+/
        -->
    <style type="text/css">
        div{
            width: 300px;
            height: 100px;
            background-color: aquamarine;
        }

    </style>
</head>
<body>
<div>hello, 北京</div>
<br/>
<div>hello, 上海</div>
<br/>
<div>hello, 天津</div>
</body>
</html>

image-20221118110815260

4.CSS 语法

1.CSS 语法可以分为两部分： (1)选择器 (2)声明

2.声明由属性和值组成，多个声明之间用分号分隔

image-20221118111353253

3.说明：最后一条声明可以不加分号(建议加上)

4.一般每行只描述一个属性

5.CSS 注释：/*注释内容*/, 类似 java

5.常用样式-字体颜色

1.介绍

颜色可以写颜色名 比如 green，也可以写 rgb 值(三原色) 比如 rgb(200,200,200)和十六进制表示
值 比如 #708090

image-20221118105403527

2.应用实例 color.html

1.修改 color.hml, 完成如下页面.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>颜色</title>
    <style type="text/css">
        /*
            说明:
            颜色可以写颜色名 比如 green，
            也可以写 rgb 值 比如 rgb(200,200,200)
            和十六进制表示值 比如 #708090
            color: rgb(255, 222, 1); //color: #ff7d44; //color: red;
         */
        div {
            /*有三种方式，指定颜色
                1. 英文
                2. 16进制 #ff7d44 [使用最多]
                3. 三原色 rgb(1,1,1)
            */
            color: #ff7d44;
        }
    </style>
</head>
<body>
<div>css 颜色字体</div>
</body>
</html>

image-20221118111949607

6.常用样式-边框 border

1.应用实例 border.html

1.修改 border.html, 完成如下页面.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <style type="text/css">
        div {
            /*具体的像素*/
            width: 300px; 
            height: 100px;
            /*border表示边框 dashed表示虚线 blue表示蓝色*/
            border: 1px dashed blue;
        }
    </style>
</head>
<body>
<div>css border</div>
</body>
</html>

image-20221118112315033

7.常用样式-宽度 width/高度 height

1.介绍

宽度/高度像素值：100px； 也可以是百分比值：50%；

2.应用实例，看前面案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <style type="text/css">
        div {
            /*width: 300px; 具体的像素*/
            width: 50%; /*百分比*/
            height: 100px;
            /*border表示边框 dashed表示虚线 blue表示蓝色*/
            border: 1px dashed blue;
        }
    </style>
</head>
<body>
<div>css border</div>
</body>
</html>

image-20221118112218998

8.常用样式-背景颜色

1.应用实例 bg.html

1.需求: 编写代码，修改 bg.html 显示如下网页.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: #ff7d44;
        }
    </style>
</head>
<body>
<div>css backgroundcolor</div>
</body>
</html>

image-20221118112447944

9.常用样式-字体样式

1.介绍

  1. font-size: 指定大小，可以按照像素大小
  2. font-weight : 指定是否粗体
  3. font-family : 指定类型

2.应用实例 font-style.html

  1. 需求, 修改 font-sytle.html , 显示如下网页

image-20221118112537537

  1. 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
    <style type="text/css">
        /*
            说明:
            1. font-size: 指定大小，可以按照像素大小
            2. font-weight : 指定是否是粗体
            3. font-family : 指定字体类型
         */
        div {
            border: 1px solid black;
            width: 300px;
            font-size: 40px;
            font-weight: bold;
            font-family: 华文新魏;
        }
    </style>
</head>
<body>
<div>css 字体样式</div>
</body>
</html>

10.常用样式-DIV 居中

1.应用实例 div-center.html

  1. 需求，修改 div-center.html, div 居中效果

image-20221118112828462

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div居中显示</title>
    <style type="text/css">
        /*
            说明:
            1. font-size: 指定大小，可以按照像素大小
            2. font-weight : 指定是否是粗体
            3. font-family : 指定字体类型,前提是电脑上安装有响应的字体
            4. margin-left margin-right 如果设置为auto, 表示左右居中
         */
        div {
            border: 1px solid black;
            width: 300px;
            font-size: 40px;
            font-weight: bold;
            font-family: 微软雅黑;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
<div>css 字体样式 div居中显示</div>
</body>
</html>

11.常用样式-文本居中

1.应用实例 text-center.html

1.需求，修改 text-center.html , 显示如下网页

image-20221118113028984

2.代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本居中显示</title>
    <style type="text/css">
        /*
            说明:
            1. font-size: 指定大小，可以按照像素大小
            2. font-weight : 指定是否是粗体
            3. font-family : 指定字体类型
            4. margin-left margin-right 如果设置为auto, 表示左右居中
            5. text-align: center 表示文本居中
         */
        div {
            border: 1px solid black;
            width: 300px;
            font-size: 40px;
            font-weight: bold;
            font-family: 华文新魏;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
    </style>
</head>
<body>
<div>文本内容居中显示</div>
</body>
</html>

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

1.应用实例 link_none.html

1.需求，修改 link_none.html, div 居中效果

image-20221118113135992

2.代码实现

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

13.常用样式-表格细线

1.应用实例 table-collapse.html

1.需求，修改 table-collapse.html, 实现如下效果

image-20221118105853395

2.代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格细线</title>
    <style type="text/css">
        /*
        	table, tr, td组合选择器
            设置边框 : 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>

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

1.应用实例 ul-none.html

1.需求，修改 ul_none.html, 完成如下网页显示

image-20221118122219866

2.代码实现

<!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>

15.CSS 使用三种方式

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

1.应用实例 修改 1.use-css-style.html , 看使用效果

image-20221118122307142

<!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>
  1. 问题分析
  • 标签多了。样式多了，代码量庞大
  • 可读性差
  • CSS 代码没有复用性

2.方式 2：在 head 标签中，使用 style 标签来定义需要的 CSS 样式

1.应用实例 修改 2.use-css-style.html , 看使用效果

image-20221118122616416

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在 head 标签中，使用 style 标签来定义需要的 CSS 样式</title>
    <style type="text/css">
        div {
            width: 300px;
            height: 100px;
            background-color: beige;
        }
        span {
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div>hello, 北京</div>
<br/>
<div>hello, 上海</div>
<br/>
<span>hello, span</span>
</body>
</html>

问题分析

  • 只能在同一页面内复用代码维护不方便，
  • 实际项目中会有很多页面，需要到对应页面去修改。工作量大

image-20221118110124265

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

1.应用实例 创建 test.css 和 修改 3.use-css-style.html , 演示使用

image-20221118122719891

div {
    width: 200px;
    height: 100px;
    background-color: red;
}
span {
    border: 2px dashed blue;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入外部的css文件</title>
    <!--
        1. rel : relation 关联
        2. href 表示要引入的css文件的位置，可以是web的完整路径
        3. type="text/css" 可以有，也可以不写
        4. 推荐使用第3种
    -->
    <link rel="stylesheet" href="./css/my.css" />
</head>
<body>
<div>hello, 北京~</div>
<br/>
<div>hello, 上海</div>
<br/>
<span>hello, span</span>
</body>
</html>

2.第三种方式是我们推荐使用的.

16.CSS 选择器

1.CSS 元素选择器

  1. 最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
  2. CSS 元素/标签选择器通常是某个 HTML 元素， 比如 p、h1、a div 等
  3. 比如:

image-20221118110220604

  1. 应用实例 修改 element-selector.html

2.ID 选择器

  1. id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
  2. id 选择器以 “#” 来定义。
  3. 比如:

image-20221118110243083

  1. 应用实例 修改 id-selector.html, 演示使用

    image-20221118122837486

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id 选择器</title>
    <!-- 
        说明
        1. 使用id选择器，需要先在要修饰元素指定id属性, id值是程序员自己指定
        2. id是唯一的，不能重复
        3. 在<style> 标签中指定id选择器时，前面需要有 #id值
    -->
    <style type="text/css">
        #llp {
            color: gold;
        }
        #css2 {
            color: green;
        }
    </style>
</head>
<body>
<h1 id="llp">llp</h1>
<p id="css2">hello, world~</p>
</body>
</html>

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

  1. class 类选择器，可以通过 class 属性选择去使用这个样式
  2. 基本语法

image-20221118110311598

  1. 应用实例 修改 class-selector.html,演示如何使用

image-20221118122954425

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <!-- 
    1. 使用class选择器，需要在被修饰的元素上，设置class属性,属性值程序员指定
    2. class属性的值，可以重复
    3. 需要在 <style></style> 指定类选择器的具体样式, 前面需要是 .类选择器名称
    -->
    <style type="text/css">
        .css1 {
            color: red;
        }
        .css2 {
            color: sandybrown;
        }
    </style>
</head>
<body>
<div class="css1">llp</div>
<div class="css1">llp1110</div>
<p class="css2">hello, world~</p>
</body>
</html>

4.组合选择器

  1. 组合选择器可以让多个选择器共用同一个 css 样式代码
  2. 语法格式

image-20221118110336807

  1. 应用实例 修改 all-selector.html, 演示如何使用

image-20221118123140699

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*
        组合选择器的基本语法:
        选择器 1，选择器 2，选择器 n{ 属性：值; }
        */
        .class01,#id01 {
            width: 300px;
            height: 100px;
            border: 2px solid red;
        }
    </style>
</head>
<body>
<div class="class01">llp1110</div>
<p id="id01">hello, world~</p>
</body>

5.优先级说明

行内样式 > ID 选择器 > class 选择器 > 元素选择器

llp1110
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS入门教程
打代码是一天，不打代码也是一天
04-04 2627
CSS，层叠样式表（Cascading Style Sheet），给网页中的HTML标签设置样式CSS写在一个单独的文件中，通过link标签在网页中引入 2.2.2 内部样式 CSS写在网页的head标签中，用style标签包裹 2.2.3 行内样式 CSS写在标签的style属性中 三种CSS样式引入方式的区别选择器，就是选取（查找）需要设置样式元素的方式 2.3.1 元素选择器 通过元素名称，选取（查找）相同元素，然后对相同元素设置CSS样式 小结：1、无论嵌套多少层，只要元素名称相同都会被找到通过类
《CSS基础入门篇》
m0_66451927的博客
01-26 2997
一、CSS概念 CSS：是Cascading Style Sheets的英文缩写，CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（如文字的字体、大小、对齐方式等）、图片的外形（如宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。 二、CSS样式规则 使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，
CSS样式分离
03-18 1959
引导语：     举个例子，依照现在主流的写法，下截图所示的灰色背景的框框命名与样式可能如下： .topic_edit_box{display:inline-block; border:1px solid#ddd; background:#f7f7f7; padding:20px 40px;} 如果您有强烈的分离意识，尤其在大型的项目中，这段样式可能会是这个样子（注意命名
学习CSS3这一篇就够了
热门推荐
轻松的小希
11-25 4万+
目录CSS第一章 CSS概述1.1、概述1.2、语法1.3、注释1.4、如何创建并引用1.4.1、外部样式表（外联式）1.4.2、内部样式表（内联式）1.4.3、内联样式（行内式）1.5、三种引入优先级第二章 CSS选择器2.1、id选择器2.2、class选择器2.3、标签选择器2.4、子代选择器2.5、后代选择器2.6、相邻兄弟选择器2.7、后续兄弟选择器2.8、交集选择器2.9、并集选择器2.10、通配符选择器2.11、伪类选择器2.11.1、anchor伪类2.11.2、input伪类2.11.3、
CSS入门 超详细
weixin_55816781的博客
04-12 6819
CSS 一基础认知 1.1：css的介绍 css：层叠样式表 css作用：给页面中的HTML标签设置样式 1.2css语法规则 写在哪里 css写在style标签中，style标签一般写在head标签里面，title标签下面 样式： 选择器{ 属性名:属性值; } 1.3css初体验 常见属性： color：文字颜色 font-size:字体大小 background-color:背景颜色 width:宽度 height：高度 <!DOCTYPE html> <html lang="e
CSS基础入门视频课程
06-11
课程中使用的所有英文单词都会逐一查询并记录，真正做到零基础入门学习，最适合初学者的教程，让你少走弯路！课程内容包括：1.CSS简介2.CSS基本用法3.选择器4.常用CSS属性5.盒子模型6.定位方式7.其他CSS属性8.页面...
css 入门基础教程
09-25
css 入门基础，适合刚开始学习css的朋友，最好先有一定的html编写经验。
前端CSS基础入门一个介绍
11-15
学习的一个记录！ 方便查看，如有违规联系删除！
css基础入门学习笔记详细教程
04-15
css入门学习笔记详细教程
CSS基础入门Demo
11-29
7个简单的CSS基础入门Demo，直接双击网页文件可查看效果，编辑网页查看代码。
CSS盒子模型
qq_40233402的博客
07-11 527
CSS盒子模型 课程目标 1.常用样式 2.盒子模型 3.CSS3常见效果 盒子模型介绍 引用百度百科 层叠样式表其实就是对静态页面进行装饰，但是，特别要注意的点是：通常建议表现形式与页面内容分离（例如：人就是内容，穿着打扮就是表现形式） 常用样式 基础样式 样式名 描述 text-align 行元素水平方向居中 text-decoration 控制下划线 none没有 underline有 line-hight 行高 font-size
CSS——背景相关属性及元素显示模式
m0_69059702的博客
07-26 182
前端基础之CSS——背景相关属性及元素显示模式
CSS入门基础详解——笔记、案例
qq_46362763的博客
04-01 1461
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护.........
CSS入门基础学习（上）
m0_61886762的博客
06-14 859
css是层叠样式表的简称，有时称为css样式表或级联样式表。css是一种标记语言，用于设置HTML页面中的文本内容，图片的外形，以及版面的布局和外观显示样式。可以美化HTML的外观页面看起来更加简介美观（HTML是结构的呈现，css则是样式的实现）。css由两部分组成：选择器以及一条或多条声明。语法：例如： （1） 选择器是用于指定HTML标签，花括号内是对该对象设置的具体形式（2）属性与属性位置之间用英文“：”分开（3）多个键值对之间用英文“；”分开CSS 代码风格1.样式格式一般情况下大多用于展开类
CSS入门基础
李李的博客
02-22 374
一、什么是CSS 1、css入门 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--规范，<style> 可以编写css的代码，每一个声明最好使用分号结尾 语法： 选择器{ 声明1; 声明2;
CSS入门必备基础（适合小白）
a_l_f_的博客
07-19 2408
CSS入门必备基础（适合小白）一、CSS是什么？1、什么是CSS？2、CSS有什么作用？二、CSS核心基础1、CSS样式规则2、引入CSS的方法1)、行内式2)、内嵌式3)、链入式2、CSS选择器1)、基础选择器2)、后代选择器3)、并集选择器4)、交集选择器5)、通配符选择器三、文本的样式属性1、字体样式属性1)、font-size：字号大小2)、font-weight: 字体粗细3)、font-family:字体4)、font-style:字体风格5)、font:2、文本样式属性1)、line-heig
css基础入门
qq_45119312的博客
04-19 127
1 标签的分类 1.块元素 block ：独占一行，可设置宽高 2.行元素 inline ：不独占一行，设置宽高无效 3.行内块元素 inline—block ：不独占一行，可设置宽高 2 css三种引用方式 1.内联式（行内样式）:<div style="color:red;">hello</div> 2.内嵌式 <style> div{font-family:"楷体"; }</style> 3.外引式 <link rel="styles
CSS新手应该如何入门（推荐）
最初都是小白
01-25 3850
CSS是一种强大而优美的工具，它的潜力远远超过我们的想象。   大家好，今天给大家带来的是css的知识，近几天我一直再看一本书，名字叫《Eric Meyer 谈 CSS》，按我的理解这本书讲述的是从一开始的没有css的时候到后来怎样一步一步的被广泛使用了 ...
CSS从入门到精通——基础知识
最新发布
09-18
CSS是层叠样式表（Cascading Style Sheets）的缩写，用于为网页添加样式和布局。在CSS中，可以通过选择器选中HTML元素，然后为这些元素应用样式。CSS的基础知识包括以下几个方面： 1. 选择器：CSS使用选择器来选中HTML元素。常见的选择器包括标签选择器、类选择器、ID选择器和属性选择器等。 2. 样式属性：CSS样式属性用于改变HTML元素的外观。常见的样式属性包括颜色、背景、字体、边框、尺寸、间距等。 3. 盒子模型：在CSS中，每个HTML元素都被看作一个盒子，由内容区域、内边距区域、边框区域和外边距区域组成。可以通过设置这些区域的属性来控制盒子的尺寸和布局。 4. 层叠和继承：CSS样式具有层叠和继承的特性。层叠指的是多个样式同时作用于一个元素时，如何确定最终的样式结果。而继承指的是子元素可以继承父元素的样式属性。 5. 相对单位和绝对单位：在CSS中，可以使用像素（px）、百分比（%）和em等单位来定义尺寸和距离。相对单位相对于父元素或者自身的尺寸来计算，而绝对单位是固定的。 这些是CSS的基础知识，掌握了这些基础知识后，你可以开始学习更高级的CSS技巧和布局方法。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值