CSS层叠样式表

最新推荐文章于 2024-01-09 20:49:39 发布
最新推荐文章于 2024-01-09 20:49:39 发布
阅读量490 收藏
点赞数
分类专栏： Web前端 文章标签： CSS CSS常用样式 CSS盒子模型 CSS浮动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_fengzi/article/details/98171273
版权

CSS介绍
CSS 指层叠样式表 (Cascading Style Sheets)定义如何显示控制 HTML元素，从而实现美化HTML网页。
优势：为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。

CSS基本语法及引入方式

基本语法
格式： 选择器{属性:值;属性:值;属性:值;…}
例如：
在这里插入图片描述
CSS页面三种引入方式
内联式：通过标签的style属性，在标签上直接写样式。在上一片文章中的所有HTML代码中都是通过内联式引入CSS的。如下：
在这里插入图片描述
嵌入式：通过style标签（写在head标签里面），在网页上创建嵌入的样式表。
下面就写一个通过嵌入式引入CSS的简单代码吧，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    CSS样式的声明: 写在head标签里面
         div是最简单的标签选择器
    -->
    <style type="text/css">
        div {
            border: 1px solid red;
            width: 700px;
            height: 200px
        }
    </style>
</head>
<body>

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

</div>

</body>
</html>

上面代码通过引入CSS可以对列表进行简单的装饰。效果如下：
在这里插入图片描述
外联式：通过link标签，链接到外部样式表到页面中。
格式如下：
在这里插入图片描述
比如上一个代码，把head标签中的关于CSS的代码删掉，拷贝到一个新建的.css文件中去，然后在原html文件的head标签中添加link标签，把.css文件加到href属性里面，就完成了外联式的引入，实现效果和上图一样。

常用CSS样式

CSS可使用长度单位：

单位单位说明范例
ptPoint，就像是Word里面的Point一样大小font-size:10pt
pxPixels，依您屏幕分辨率而决定大小font-size:10px
pcPica，6个Pica是一英吋font-size:10pc
mm公厘，这个设定值完全不会因为其它设定而改变font-size:10mm
cm公分，不会因为使用者设定而改变font-size:10cm
%百分比，大部分是指所在位置宽度或者长度百分比font-size:10%

CSS可用颜色表示方式：

表示方式表示方式说明范例
#rrggbb可以用Windows色彩选择工具找到color:#feefc7
rgb(#,#,#)用数字来表示红色蓝色以及绿色的混合,也可以用Windows色彩选择工具找color:rgb(135,255,124)
rgb(%,%,%)用百分比来代表红色蓝色以及绿色的强度来混合颜色color:rgb(70%,35%,41%)
颜色名称用颜色的名称来指定颜色color:brown

CSS可用背景值：

名称说明可能值范例
background背景下面的背景设定值皆适用background:fixed
background-attachment背景图性是否固定fixed, scrollbackground-attachment:fixed
background-color背景颜色颜色
transparent(透空)		backgroun-color:yellow
background-image背景图片none(无背景图)
url(****)(图片位置)		background-image:url(test.jpg)
background-position背景图位置水平 垂直background-position:135 159
background-repeat背景是否重复repeat(重复)
repeat-x(水平重复)
repeat-y(垂直重复)
no-repeat(不重复)		background-repeat:repeat

CSS可用属性值：

名称说明可能值范例
visibility显示或是隐藏inherit(父组件决定)
hidden(隐藏)
visible(显示)		visibility:hidden
width宽度auto(自动决定)
数字		width:135
height高度auto(自动决定)
数字		height:100
z-indexZ轴高度(立体，是否在另一个组件之上)auto(自动决定)
数字		z-index:135
position定位方式absolute(绝对寻址-依窗口坐标，原点为父窗口左上角)
relative(相对定位-以一般网页排列[right.center.left]后再根据坐标定位，原点为定位后的位置)
static(静态定位-以一般网页排列)		position:absolute
top(对象的position属性须为absolute或relative)对象的Y坐标(原点根据postion属性有所不同)数字
left(对象的position属性须为absolute或relative)对象的X坐标(原点根据postion属性有所不同)数字

CSS可用文字设定值：

名称说明可能值范例
font文字设定以下所有皆可使用font:arial
font-family字体字体名称font-family:arial
font-size字体大小百分比或是数字(单位)font-size:12px
font-style字型样式normal(普通)
italic(斜体)
oblique(斜体)		font-style:italic
font-variant字型特别样式normal(普通)
small-caps(大小英文字母)		font-variant:small-caps
font-weight字型粗细normal(普通)
bold(粗体)
bolder(超粗体)
lighter(细体)
数字(400=normal 700=bold )		font-weight:bolder
letter-spacing字符相距normal(普通)
数字(预设为0)		letter-spacing:5
text-align字符对齐left(左边)
right(右边)
center(中间)
justify(左右平分)		text-align:justify
text-decoration字符样式none(普通)
underline(加底线)
no-underline(不加底线)
blink(闪烁)
no-blink(不闪烁)
line-through(加删除线)
no-line-through(不加删除线)
overline(加顶线)
no-overline(不加顶线)		text-decoration:underline

CSS可用表格设定值 [框线位置：(上-top.下-bottom.左-left.右-right)]

名称说明可能值范例
border表格边框设定以下所有皆可使用border:green
border-color
border-(框线位置)-color		边框颜色任何颜色表示方法border-color:blue
border-style
border-(框线位置)-style		边框样式none(无边框)
dotted(点线)
dashed(虚线)
solid(实线)
double(双线)
groove(立体凹线)
ridge(立体凸线)
inset(立体嵌入线)
outset(立体隆起线)		border-style:dotted
border-width
border-(框线位置)-width		边框宽度数字border-width:5
padding边框补白数字padding:5

基本选择器

1.标签选择器
标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。举例：
在这里插入图片描述
2.id选择器
通过id名来选择元素（id前面加一个#，表示id选择器），元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。举例：
在这里插入图片描述
3.类选择器
通过类名来选择元素（类前面加一个. 表示类选择器），一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。举例：
在这里插入图片描述
4.层级选择器
主要应用在选择父元素下的子元素，或者子元素下面的子元素（直接用空格对它们进行连接），可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。举例：
在这里插入图片描述
5.组选择器
多个选择器，如果有同样的样式设置，可以使用组选择器（用，进行连接组合）。举例：
在这里插入图片描述
6.伪类及伪元素选择器
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after，它们可以通过样式在元素中相应位置插入内容。举例：
在这里插入图片描述

盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。如下图：
在这里插入图片描述
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

下面举个例子，计算盒子的总宽度：
在这里插入图片描述
盒子总宽度：
300px (宽)+ 50px (左 + 右填充)+ 50px (左 + 右边框)+ 50px (左 + 右边距)
= 450px
用代码实现一个类似于上面的盒子模型，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box{
            /*设置内边距为25px*/
            padding: 25px;
            /*设置外边距*/
            margin: 25px auto;
            /*设置边框乱度为25px*/
            border: 25px skyblue solid;
            /*指定盒子的宽度*/
            width: 300px;
            /*文本居中*/
            text-align: center;
        }
    </style>
</head>
<body>

<div class="box">
    盒子模型
</div>

</body>
</html>

可以总结如下：
总元素的宽度=宽度+左填充+右填充+左边框 +右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框 +下边框+上边距+下边距

盒子模型案例
利用盒子模型，实现一个电影宣传图和其简介的页面，并且设计的美观一点，实现效果图如下：
在这里插入图片描述
下面就是代码的编写了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box,  img{
            width: 232px;
        }
        .box{
            border: 2px gray solid;
        }
        .detail{
            font-size: 12px;
            /*设置内边距为5PX*/
            padding: 8px;
        }
    </style>
</head>
<body>

<div class="box">
    <div class="taobao-image">
        <img src="img/movie.jpg">
    </div>
    <div class="detail">
    天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。元始天尊启动了天劫咒语，3年后天雷将会降临，摧毁魔丸。
    </div>

</div>
</body>
</html>

CSS浮动

什么是 CSS Float（浮动）？
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。

元素怎样浮动？

  • 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
  • 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
  • 浮动元素之后的元素将围绕它。
  • 浮动元素之前的元素将不会受到影响。

下面用图的方式来说明元素是怎样浮动的：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
如果想让某一元素取消浮动，可以通过clear属性终止浮动，后面加终止浮动的方向。
在这里插入图片描述
浮动案例
我们针对上面的盒子模型的案例进行修改，实现元素浮动以及终止浮动的样式，最终实现效果如下：
在这里插入图片描述
具体代码如下：

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

    <style type="text/css">
        .box, img {
            width: 126px;
        }
        .box {
            /*指定边框的宽度, 样式, 颜色 */
            border: 1px gray solid;
            /*让所有的div标签向左浮动， 排列在同一行*/
            float: left;
            /*设置外边距*/
            margin: 5px;
            padding-bottom: 10px;
        }
        .detail {
            font-size: 10px;
            /*设置内边距为5PX*/
            padding: 8px;
            height: 20px;
            /*内容会被修剪，并且其余内容是不可见的*/
            /*overflow: hidden;*/

            /*如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。*/
            overflow: auto;
        }
        .clear {
            /*指定段落的左侧或右侧不允许浮动的元素：float:right; float:both;*/
            clear: left;
        }
    </style>
</head>
<body>

<div class="box">
    <div class="taobao-image">
        <img src="img/movie.jpg">
    </div>
    <div class="detail">
        天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。元始天尊启动了天劫咒语，3年后天雷将会降临，摧毁魔丸。
    </div>
</div>

<div class="box">
    <div class="taobao-image">
        <img src="img/movie.jpg">
    </div>
    <div class="detail">
        天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人，助周伐纣时可堪大用；
        而魔丸则会诞出魔王，为祸人间。元始天尊启动了天劫咒语，3年后天雷将会降临，摧毁魔丸。
    </div>
</div>
<div class="box">
    <div class="taobao-image">
        <img src="img/movie.jpg">
    </div>
    <div class="detail">
        天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。元始天尊启动了天劫咒语，3年后天雷将会降临，摧毁魔丸。
    </div>
</div>

<div class="box">
    <div class="taobao-image">
        <img src="img/movie.jpg">
    </div>
    <div class="detail">
        天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。元始天尊启动了天劫咒语，3年后天雷将会降临，摧毁魔丸。
    </div>
</div>

<div class="box clear">
    <div class="taobao-image">
        <img src="img/movie.jpg">
    </div>
    <div class="detail">
        天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。元始天尊启动了天劫咒语，3年后天雷将会降临，摧毁魔丸。
    </div>
</div>

<div class="box">
    <div class="taobao-image">
        <img src="img/movie.jpg">
    </div>
    <div class="detail">
        天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。元始天尊启动了天劫咒语，3年后天雷将会降临，摧毁魔丸。
    </div>
</div>

</body>
</html>
Mr_fengzi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css选择器优先级
胖达cd的博客
07-28 732
CSS新手笔记 1.CSS的定义由三部分构成： 1.基本语法机构： 选择器{ 属性：值； } 2.三个值作用：. 选择器作用： 选中标签对其进行样式美化 属性作用：对元素进行哪些样式美化 值作用：决定属性美化样式的程度 注意：css中的属性与html元素行内属性不是一个东西 2.基本选择器 通配选择器 选择文档中所有HTML元素,例:*{ margin:10px} 元素选择器 选择指...
层叠样式表
zheshuidingdezhu的博客
08-01 260
css--层叠样式表 网页实际上是一个多层的结构，通过css可以分别为网页的每一层设置样式，而最终我们看到的只有最上面一层。总之css就是用来涉恶之网页中元素的样式 第一种方式（内联样式，行内样式） 在标签内部通过style设置元素的样式 存在的问题：使用内联样式，样式只能对一个标签生效，如果希望影象到多个元素，则必须在每个元素中都复制一遍，并且，当样式发生改变时，我们也是需要一个一个改。 第二种方式（内部样式表） 将样式编写到head中的style标签中然后通过css的选择器来选中元素，并为其设置各种样式
CSS层叠样式表的层叠是什么意思(自我理解)
09-25
CSS层叠样式表（Cascading Style Sheets，简称CSS）是一种用于描述网页及应用程序用户界面外观和表现的样式语言。层叠的概念是CSS的核心特性之一，它涉及到样式表中的继承、权重和覆盖规则，帮助开发者有效地管理和...
层叠样式表/CSS
Listner的博客
01-20 399
css（层叠样式表）：用于改变元素在页面中的显示样式，使用时通过前文html标签中的标签选择器选择所需要的改变的标签编辑样式即可 CSS的引入方式： 1. 行间样式： 修改少数样式使用，书写在索要修改的标签后 <标签名 style = " 修改样式 "> 2. 内联样式： 开发小型项目时使用，书写在<head>中 <head> <style> ...
CSS - 层叠样式表
weixin_47790139的博客
12-13 392
文章目录前言CSS1.1、概述1.2、用法1.3、创建样式1.3.1、外部样式表（外联式）1.3.2、内部样式表（内联式）1.3.3、内联样式（行内式）第二章 CSS选择器2.1、标签名选择器2.2、class选择器2.3、id选择器2.4、分组选择器2.5、属性选择器第三章 CSS常见样式3.1、背景样式3.2、文本样式3.3、字体样式3.4、链接样式3.5、列表样式3.6、表格样式3.7、轮廓样式第四章 CSS盒子模型4.1、概述4.2、内边距4.3、边框4.4、外边距 前言 本人发布的一系列资料都是学
CSS（层叠样式表）
qq524752841的专栏
07-13 890
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言，CSS是给网页中的元素来设置样式，其实就是给页面进行美化。简单介绍一个之前不同的字体大小我们可以用H1到H6进行控制，其实如果用css 也可以进行控制............
CSS--层叠样式表
weixin_45398401的博客
08-23 1218
注：浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。（因为浮动之后会脱标）
CSS 层叠样式表
最新发布
weixin_52223392的博客
01-09 1208
所有HTML元素都可以视为方框，在CSS中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”CSS框模型实质上是一个包围每个HTML元素的况，包括：外边距、边框、内边距以及内容内容：框的内容，显示文本和图像内边距：清除内容周围的区域，内边距是透明的边框：围绕内边距和内容的边框外边距：清除边界外的区域，外边距是透明的宽度：内容区域的宽度高度：内容区域的高度元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。
CSS ------ 层叠样式表
Miss_cym的博客
11-07 525
A. css代码风格 a. 建议使用展开格式,更直观 选择器 { 属性: 值 ; } b. 属性名,属性值全部使用小写字母 c. 属性值前,冒号后面,保留一个空格 B. 选择器 1. 基础选择器 标签选择器: 标签名 类选择器: .类名 id选择器: #id名 通配符选择器: * ...
选择器与常用属性
weixin_30894583的博客
05-28 175
一、**css2的选择符：----------------------------------------------------------------- 1. html选择符（标签选择器） 就是把html标签作为选择符使用 如 p{....} 网页中所有p标签采用此样式 h2{....} 网页中所有h2标签采用此样式 2. class类选择符 (使用点.将自定义名（类名）来定...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值