CSS--介绍

最新推荐文章于 2022-04-15 12:29:17 发布
最新推荐文章于 2022-04-15 12:29:17 发布
阅读量930 收藏 1
点赞数 1
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46893497/article/details/112284440
版权

CSS

1、CSS介绍

  • CSS英文全称：Cascading Style Sheets，通常我们称之为CSS样式或层叠样式表。
    • 样式：给HTML标签添加需要展示的效果（可以理解为外观）
    • 层叠：使用不同的添加方式，给同一个HTML标签添加样式，最后所有的样式都叠加到一起，共同作用于该标签。
  • CSS的作用：主要用于设置HTML页面中的文本内容（字体、大小、对其方式等）、图片的外形（高宽、边框样式、边距等）以及版面的布局等外观显示样式。简单来讲，CSS可以让HTML页面更美观。
  • 问题：
    • 1.css写在哪里?
    • 2.如何找到标签添加的样式
    • 3.都有什么样式

2、CSS样式规则

  • 使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练的使用CSS对网页进行修饰，首先需要了解CSS样式规则。具体格式如下:
选择器 {

属性1 : 属性值;

属性2 : 属性值;

..

}
  • 在上面的样式规则中，“选择器”用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。属性和属性值以键值对方式出现，使用英文冒号“:”分隔。多个属性之间使用英文分号“;”分隔。例如：
<style>

h2{

color : red ;

font-size : 100px ;

}

</style>
  • 初学者在书写CSS样式时，除了要遵循CSS样式规则，还必须注意CSS代码结构中的几个特点，具体如下：
    • l CSS样式“选择器”严格区分大小写，“属性”和“属性值”不区分大小写。
    • l 多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是，为了便于增加新样式最好保留。
    • l 如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。例如： p { font-family:“Times New Roman”;}
    • l 在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释，例如：
      • /* 这是CSS注释文本,此文本不会显示在浏览器窗口中 */
    • l 属性的值和单位之间是不允许出现空格的，否则浏览器解析时会出错。
      • 例如，下面这行代码就是不正确的。
      • h1{ font-size:20 px; } /* 20和单位px之间有空格,错误 */

3、引入CSS样式

  • CSS使用非常灵活，既可以嵌入在HTML文档中，也可以是一个单独的文件，如果是单独的文件，则必须以.css为扩展名。CSS和HTML的结合3种常用方式：

1. 行内样式

  • 行内样式，是通过标签的style属性来设置元素的样式

<

!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>CSS样式演示</title>

    </head>

    <body>

        <!--方式1：行内样式

        color : 表示字体颜色

        font-size : 表示字体大小

        -->

        <span style="color:#ff0000;font-size:28px;">大牛播客</span>

    </body>

</html>

2. 内部样式

  • 内部样式又称为内嵌式，是将CSS代码集中写在HTML文档的head头部标签体中，并且使用style标签定义。
    • l 给当前html文件中的多个标签设置样式。
    • l 在html的head标签中使用style标签来定义CSS
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>CSS样式演示</title>

        <!--方式2：内部样式 -->

        <style type="text/css">

            span {

                color: #ff0000;

                font-size: 30px;

            }

        </style>

    </head>

    <body>

        <!-- span标签会引用<style>中声明的span样式 -->

        <span>大牛播客</span>

    </body>

</html>
  • 内嵌式CSS样式只对其所在的HTML页面有效，可以对多处标签统一设置样式，因此，仅设计一个页面时，使用内嵌式是个不错的选择。但如果是一个网站，不建议使用这种方式，因为他不能充分发挥CSS代码的重用优势。

3. 外部样式 （前端开发，都采用该方式 主流方式）

  • 外部样式又称为链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将样式连接到HTML文档中

  • css_demo1.html代码：
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>CSS样式演示</title>

        <!--方式3：外部样式

        rel="stylesheet", 固定值,当前文件和引入文件的关系,rel是relationship的缩写,stylesheet是样式表

        type="text/css",  固定值,表示浏览器解析方式

        href="xxx.css",  表示css文件位置

        -->

        <link rel="stylesheet" type="text/css" href="css/style.css" />

    </head>

    <body>

        <!-- 引用了css/sytle.css中的span样式 -->

        <span>大牛播客</span>

    </body>

</html>
  • 链入式最大的好处是同一个CSS样式表可以被不同的HTML页面链接使用，同时一个HTML页面也可以通过多个link标记链接多个CSS样式表

三种样式的优先级

  • 行内样式 > 内部样式|外部样式(谁写在后边,使用谁,后边的会覆盖前边的)

4、选择器

  • 要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器，本小节将对CSS基础选择器进行详细地讲解。

4.1、元素选择器

  • 元素选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：
标签名{

属性1 : 属性值1;

属性2 : 属性值2;

属性3 : 属性值3;

}
  • 该语法中，所有的HTML标签名都可以作为元素选择器(标记选择器)，例如body、p、div、span等。用标记选择器定义的样式对页面中该类型的所有标记都有效。例如：
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>CSS样式演示</title>

        <!--方式2：内部样式 -->

        <style type="text/css">

            span {

                color: #ff0000;

                font-size: 30px;

            }

        </style>

    </head>

    <body>

        <!-- span标签会引用<style>中声明的span样式 -->

        <span>大牛播客</span>

    </body>

</html>

4.2、ID选择器

  • id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：
#id名{

属性1 : 属性值1;

属性2 : 属性值2;

属性3 : 属性值3;

}
  • 该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。即使在页面中使用多个相同id值也不会报错,但是会影响到javascript的网页特效。例如：
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>CSS样式演示</title>

        <style type="text/css">

            #demo1 {

                color: #00ff00;

            }

        </style>

    </head>

<body>

    <!-- id=”demo1”会引用<style>中声明的#demo1样式 -->

        <h1 id="demo1">大牛播客</h1>

    </body>

</html>

4.3、类选择器

  • 类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：
.类名{

属性1 : 属性值1;

属性2 : 属性值2;

属性3 : 属性值3;

}
  • 该语法中，类名即为HTML元素的class属性值，大多数HTML元素都可以定义class属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式。例如：
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>CSS样式演示</title>

        <style type="text/css">

            .myClass {

                font-size: 25px;

            }

        </style>

    </head>

    <body>

        <h1 class="myClass">大数据课程</h1>

    </body>

</html>

5、CSS样式

5.1、边框和尺寸

  • border ：设置边框的样式

    • 格式：宽度 样式 颜色
    • 例如：style=”border : 1px solid #ff0000” ，1像素实边红色。
    • 样式取值：solid 实线，none 无边，double 双线 等

  • width、height ：用于设置标签的宽度、高度。

  • 参考代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>CSS样式演示</title>

        <style type="text/css">

            div {

                border: 1px solid #000; /*1像素，实边，黑色*/

                width: 200px;

                height: 200px;

            }

        </style>

    </head>

    <body>

        <div></div>

    </body>

</html>
  • 运行结果：
    在这里插入图片描述
  • 扩展 : 可以分别设置4个边
    • border-left : 左
    • border-right : 右
    • border-top : 上
    • border-bottom : 下

5.2、转换

  • HTML提供丰富的标签，这些标签被定义成了不同的类型，一般分为：块标签和行内标签。
  • l 块标签：以区域块方式出现。每个块标签独自占据一整行或多整行。
    • 常见的块元素： <h1>、<div>、<ul> 等
  • l 行内元素：不必在新的一行开始，同时也不强迫其他元素在新的一行显示。
    • 常见的行内元素： <span>、<a> 等
  • 在开发中，希望行内元素具有块元素的特性或者块元素具有行内元素的特性，可以使用display进行转换
选择器{display:属性值}

常用的属性值：

inline：此元素将显示为行内元素（行内元素默认的display属性值）

block：此元素将显为块元素（块元素默认的display属性值）

none：此元素将被隐藏，不显示，也不占用页面空间。
  • 案例：
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>CSS样式_转换属性</title>

        <style type="text/css">

            div{

                border: 1px solid red;

            }

            span{

                border: 1px solid green;

            }

        </style>

    </head>

    <body>

        <div>我是一个div,我会霸占一行</div>

        <div style="display: inline;">我是一个div,被转换为了行内元素,不在占用一行

        </div>

        <span>我是一个span标签,只占用一行中的一部分</span>

        <span style="display: block;">我是一个span标签,被转换为了行间元素,会霸占一行

</span>

        <div style="display: none;">我是一个隐藏的div,你是看不到我的</div>

    </body>

</html>

5.3、字体

  • color ：颜色，字体颜色
  • font-size : 字体的大小,像素px
  • font-family : 字体 (例如：幼圆,宋体,楷体…)
  • text-decoration : none 取消文字上的下划线
  • 案例：
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>CSS样式_字体</title>

    </head>

    <body>

        <a href="#" target="_blank" style="color: red;">我是红色超链接</a>

        <a href="#" target="_blank" style="font-size:50px">我是最大超链接</a>

        <a href="#" target="_blank" style="font-family: 楷体;">我是楷体超链接</a>

        <a href="#" target="_blank" style="text-decoration: none;">我是无下划线的超链接</a>

    </body>

</html>

5.4、背景色

  • background-color : 设置背景色
  • background-image : url(背景图片的连接)
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>设置背景色和设置背景图片属性</title>

    </head>

    <!--给body添加一个背景图片-->

    <body style="background-image: url(img/bg.jpg);">

        <div style="background-color: yellow;">我是一个div</div>

    </body>

</html>

5.5、布局

  • 通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版，就需要使用浮动
选择器{float:属性值;}

常用属性值：

left：元素向左浮动

right：元素向右浮动

none：元素不浮动（默认值）
  • 由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响。如果要避免影响，需要使用clear属性进行清除浮动。
选择器{clear:属性值;}

常用属性值：

left：不允许左侧有浮动元素（清除左侧浮动的影响）

right：不允许右侧有浮动元素（清除右侧浮动的影响）

both：同时清除左右两侧浮动的影响
  • 案例：
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>CSS样式_布局</title>

    </head>

    <body>

        <!--默认上下布局-->

        <div>

            <div>区域1-1</div>

            <div>区域1-2</div>

        </div>

        <hr />

        <!--浮动左右布局-->

        <div>

            <div style="float: left;">区域2-1</div>

            <div style="float: left;">区域2-2</div>

        </div>

        <!-- 重点关注下面这行代码，查看页面效果 -->

        <div style=" float: left;">区域X</div>

        <hr />

        <div>

            <div style="float: left;">区域2-1</div>

            <div style="float: left;">区域2-2</div>

            <div style="float: left;">区域2-3</div>

        </div>

    </body>

</html>
  • 运行效果：
    在这里插入图片描述- 修改代码：
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>CSS样式_布局</title>

    </head>

    <body>

        <!--默认上下布局-->

        <div>

            <div>区域1-1</div>

            <div>区域1-2</div>

        </div>

        <hr />

        <!--浮动左右布局-->

        <div>

            <div style="float: left;">区域2-1</div>

            <div style="float: left;">区域2-2</div>

        </div>

        <!--取消浮动，另起一行布局-->

        <div style="clear:both">区域X</div>

        <!--<div style="float: left;">区域X</div>-->

        <hr />

        <div>

            <div style="float: left;">区域2-1</div>

            <div style="float: left;">区域2-2</div>

            <div style="float: left;">区域2-3</div>

        </div>

    </body>

</html>
  • 运行效果：
    在这里插入图片描述

5.6、CSS的盒子模型

5.6.1、什么是盒子模型

  • 何一个网页元素包含由这些属性组成：内容(content)、内边距(padding)、边框(border)、边界(margin)， 这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。
    • 内容（content）就是盒子里装的东西；
    • 内边距(padding) 就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；
    • 边框(border) 就是盒子本身了；
    • 外边界(margin) 则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。
      在这里插入图片描述
  • 外边距：当前元素 与 它外面元素之间的距离
  • 内边距：当前元素 与 它内部的内容(可以是标签,可以是文本内容)之间的距离

5.6.2、盒子模型的相关属性

  • 盒子模型相关的属性：border 边框，padding 内边距；margin 外边距；
属性作用
border边框属性
padding内边距
margin外边距
内边距：padding
  • 内边距四边距离定义：
内边距的写法含义
padding-top:10px;上内边距
padding-left:10px;左内边距
padding-bottom: 10px;下内边距
padding-right:10px;右内边距
外边距：margin
外边距的写法含义
margin-top:10px;上外边距
margin-left:10px;左外边距
margin-bottom: 10px;下外边距
margin-right:10px;右外边距
  • 简写形式：
外边距的写法含义
margin:10px四边相同
margin:10px 20px;上下 左右
margin:10px 20px 30px;上 左右 下
margin:10px 20px 30px 40px;上 右 下 左
  • margin：上下左右 都使用同一个边距。margin:10px
  • margin：上下相同、左右相同 margin:10px(上下 ) 20px(左右);
  • margin：上下不同 、左右相同 margin:10px(上) 20px(左右) 5px(下)
  • margin: 10px(上) 20px(右) 5px(下) 15px(左)
韩家小志
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML第三课
Y1687的博客
12-12 572
分
Css经典笔记
热门推荐
飘
04-24 1万+
# 课程目标: &gt; 1. 学会使用CSS选择器 &gt; 2. 熟记CSS样式和外观属性 &gt; 3. 熟练掌握CSS各种选择器 &gt; 4. 熟练掌握CSS各种选择器 &gt; 5. 熟练掌握CSS三种显示模式 &gt; 6. 熟练掌握CSS背景属性 &gt; 7. 熟练掌握CSS三大特性 &gt; 8. 熟练掌握CSS盒子模型 &gt; 9. 熟练掌握CSS浮动 &gt; 10.熟练...
CSS规范 - 命名规则
ykwang090810的专栏
07-02 415
来至于：http://nec.netease.com/standard/css-name.html 使用类选择器，放弃ID选择器 ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS，就无法重用。 NEC特殊字符："-"连字符 "-"在本规范中并不表示连字符的含义。 她只表示两种含义：分类前缀分隔符、扩展分隔符，详见以下具体规则。 分类的命名方法：使用
css &-的使用
weixin_46451295的博客
04-15 1935
.ab{ &-c{} }
前端开发常用小技巧总结
D先生的博客
10-09 469
font-size/font-family 现在网页中普遍使用14px+。 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。 各种字体之间必须使用英文状态下的逗号隔开。 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-fam...
css-sprite使用详解
09-25
主要介绍了css-sprite的使用详解,css-sprite是一个经常被用来合并前端图片的工具.需要的朋友可以参考下
html-css-网页模板-团队介绍
11-23
html-css-网页模板-团队介绍
html-css-网页模板-app介绍
11-23
html-css-网页模板-app介绍
JavaWeb新版教程-html&CSS-L和CSS-CSS介绍.avi
05-18
JavaWeb新版教程-html&CSS-L和CSS-CSS介绍.avi
JavaWeb新版教程-html&CSS-L和CSS-CSS语法介绍.avi
05-18
JavaWeb新版教程-html&CSS-L和CSS-CSS语法介绍.avi
CSS之右边竖条的实现方法
weixin_40322503的博客
04-09 7509
感谢chokcoco大佬，原来版本是”左边竖条“。 题目和解题思路来源：http://www.cnblogs.com/coco1s/p/5893921.html 主要记录通过这个题目而恶补的css属性们。     题目1：下面这个图形，只使用一个标签，可以有多少种实现方式：   第一种情况：使用border #div1 { background: #d...
2020-09-03
qq_45723840的博客
09-03 230
HTML课堂笔记 css作用：升级轻松，维护方便。 font：字体属性 color：颜色属性 background：背景属性 float：浮动属性 选择器严格区分大小写 属性和值不区分大小写（两者习惯用小写） 内嵌式写在头部 .类名不具有唯一性 id具有唯一性 文本样式属性： 1、font-size属性用于字体的字号 2、font-family属性用于设置字体 3、font-weight属性用于字体的粗细 4、font-style属性用于字体风格（normal默认字体） ...
CSS样式规则-CSS结构的特点
xiaoxijinger的博客
04-29 896
要想熟练地使用CSS对网页进行修饰，首先要了解CSS样式规则。设置CSS样式的具体语法规则如下。 选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; …} 在上面的样式规则中，选择器用于指定需要改变样式的HTML标签，花括号内部是一条或多条声明。每条声明由一个属性和属性值组成，以“键值对”的形式出现。 其中属性是对指定的标签设置的样式属性，例如字体大小、文本颜色等。属性和属性值之间用英文冒号“:”连接，多个声明之间用英文分号“;”进行分隔。例如，图1所示的CSS样式规则的结构示意图。 图1
网页设计与制作（HTML+CSS)第三课
weixin_45722894的博客
12-12 1552
3.1CSS核心基础： 3.1.1CSS样式规则： 格式：选择器{属性1：属性值； 属性2:属性值2； 属性3：属性值3；} 选择器严格区分大小写，属性和值不区分大小写。 *如果属性的值有多个单词组成且中间包含空格，则必须为这个属性值加上英文状态的引号 *在CSS代码中空格是不被解析的 3.1.2引用CSS样式表： 1.行内式：也称为内联样式，是通过标记的style属性来设置元素的...
CSS的基本知识
一无是处的博客
03-13 650
CSS的基本了解
css代码中的“~”和“>”是什么意思
dongkan8129的博客
08-11 2760
css中“~”是: 为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置样式： p~ul{ 　　width：100px； } <p>1</p> <ul> 　　<li>2</li> 　　<li>2</li> 　　<li>2</li> ...
网页设计基础2
weixin_45729083的博客
12-11 229
网页设计基础2 1.图像的宽高属性：通常只设置其中一个，另一个按照图等比例显示。如果两个同时设置，则会出现图像变形或者失真。 2.相对路径： 图像文件和html文件位于同一文件夹，只需输入图像文件夹名称即可，如：<img scr=“logo.gif/” 图像文件位于html文件的下一级文件夹，输入文件夹名和文件名，之间用/隔开...
25个强大的CSS代码，据说这些是开发者经常遇到比较棘手的代码
weixin_34290390的博客
07-20 640
今天介绍给大家我收藏的25个非常有用的CSS代码片段，在你开发基于CSS的网站时，这些代码是经常用到的，比方说一些特殊的效果，圆角边框，CSS透明度，梯形环绕，CSS小三角等，希望对你有用 1简单又好的 Blockquote 样式 CSS代码如下 1 blockquote { 2 background:#f9f9f9; 3 border-left:10px solid #c...
CSS简介：介绍和使用入门指南-CSS选择器（代码+图解）
u014240783的专栏
03-25 356
课程导航 层叠样式表被亲切地称为CSS，是一种简单的设计语言，旨在简化web页面呈现的过程。CSS允许你将样式应用到网页上。更重要的是，CSS使您能够独立于组成每个web页面的HTML来完成这项工作。 CSS很容易学习和理解, 但是它提供了对HTML文档表示的强大控制。 为什么使用CSS？ CSS可以节省时间：你只需编写一次CSS, 即可在多个HTML页面中重复使用同一张纸。 易于维护：只需进行整体更改即可更改样式, 所有网页中的所有元素都会自动更新。 搜索引擎：..
上下居中 css text-bottom
最新发布
09-10
### 回答1： 要让文字上下居中，可以使用CSS的`line-height`属性来实现。将`line-height`属性的值设置为...以上是关于CSS的text-bottom属性的简单介绍和示例。通过对CSS样式的设置，我们可以轻松达到上下居中的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值