CSS

最新推荐文章于 2022-05-30 09:55:51 发布
最新推荐文章于 2022-05-30 09:55:51 发布
阅读量163 收藏
点赞数
分类专栏： WEB前端 文章标签： html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gy99csdn/article/details/113836000
版权

CSS

1.概念

1.1 CSS 指层叠样式表 （级联样式表）

  • 主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等等外观显示样式。
  • CSS以HTML为基础，提供了丰富样式功能

1.2 CSS与HTML结合方式

  • 方式一：
    在一个html标签/元素, 加上一个style属性, 在style属性里写一些css样式, 多个样式以分号分割, 样式本身是一种key-value结构
<p style="background-color:#FF0000; color:#FFFFFF">
	p标签段落内容。
</p>
  • 方式二：
    写在head标签的style标签里面
<head>
<style type=”text/css”>
	p { color:#FF0000;}
</style>
</head>

例2：
在这里插入图片描述

  • 方式三：

链接：

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

导入：

<style type="text/css">
	@import url(css_3.css);
</style>

在这里插入图片描述

2.选择器

2.0 样式优先级

!important

  • CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。
div{ background: red !important; }

在这里插入图片描述

  • !important > 行内 > ID选择器 > 伪类|类 | 属性选择 > 标签 > 通配符
  • 就近原则
    在这里插入图片描述
    在这里插入图片描述
    标签选择器优先级大于通配符实例：
    在这里插入图片描述
    本文件选择器优先级大于引用css示例：
    在这里插入图片描述
    在这里插入图片描述

2.1 标签选择器

把html元素 通过标签名 和对应的css样式绑定到一起
Eg:

// 对所有<p>标签
<style>
	p {color:red;}
</style>

例2：
在这里插入图片描述

2.2 类选择器

  • 类选择器的选择符是 “.“
  • 类选择器在css样式编码中是最常用到的
    Eg:
    style
<style>
    .aaa{
        background: #FF0000;
    }
</style>

class

<div class="aaa">11
</div>

例2：
在这里插入图片描述

2.3 Id选择器

  • ID选择器以 “#” 来定义
  • 不同于类选择器，ID 选择器不能结合使用
  • 不提倡用id 去写样式，因为他的权重太高。 Id 主要是为了 js 做准备
    Eg:

style

<style>
    #aaa{
        background: #FF0000;
    }
</style>

class

<div id="aaa">11
</div>

例2：
在这里插入图片描述

2.4 复合选择器

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

2.5 伪类选择器

CSS伪类是用来添加一些选择器的特殊效果：

实例
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.6 伪元素选择器

2.7 属性选择器

在这里插入图片描述
在这里插入图片描述

3.盒子模型

  • 盒子模型：把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器
  • 每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
    在这里插入图片描述
  • 盒子模型属性
    Margin: 外边距(参数方式上右下左)
    Padding:内边距
    在这里插入图片描述

Border:边框

 /* 边框 必须要加实线/固体属性,   不加边框不会起效果*/
            border: 1px solid silver;

Content:内容

  • 注意
    background = padding+ content
    高宽属性仅是content高宽
  • 行内元素的margin和padding属性
    水平方向的padding-left,padding-right,margin-left,margin- right都产生边距效果
    竖直方向的padding-top,padding-bottom,margin-top,margin-bottom不会产生边距效果

4.布局和浮动

4.1 行/块元素转换

  • 对应属性
    块级元素对应于display:block
    行内元素对应于display:inline
    行内块元素对应于display: inline-block属性
  • 改变
    display: block 显示为块级元素
    display: inline 显示为内联元素
    display: inline-block 显示为内联块级元素，表现为同行显示并可修改宽高内外边距等属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            /*转化为行元素内块元素*/
            display: inline-block;
            width: 200px;
            height: 350px;
            background: #ff371a;
            margin: 30px 0 0 30px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

在这里插入图片描述

  • 对齐: (block --> inline-block: eg:div)
    vertical-align: top;

4.2 注意(合并现象)

  • Margin边框合并
    在这里插入图片描述
    eg：
    在这里插入图片描述

在这里插入图片描述

4.3 浮动float

  • 标准流
    块级元素纵向有序排列
    行内块（行内）元素横向有序排列
  • float被设计出来的初衷是用于:文字环绕效果
  • 设置了浮动的元素，使元素脱离标准流（块级元素横向排列等）
  • 浮动特性
    浮动只影响后面的元素
    连续浮动一行显示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background: #ff371a;

            float: left;;
        }
        .div2{
            width: 200px;
            height: 200px;
            background: #34ff68;

            float: left;
        }
        .div3{
            width: 200px;
            height: 200px;
            background: #3748ff;

            float: left;
        }
    </style>
</head>
<body>
    <div class="div1">
    </div>
    <div class="div2">
    </div>
    <div class="div3">
    </div>
    <hr>
</body>
</html>

在这里插入图片描述

浮动以元素顶部为基准对齐
浮动可实现模式转换

  • Clear: 谁受影响谁清除
    left:在左侧不允许浮动元素
    right:在右侧不允许浮动元素
    both:在左右侧不允许浮动元素
    Eg:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background: #ff371a;

            float: left;;
        }
        .div2{
            width: 300px;
            height: 200px;
            background: #34ff68;

            /*clear: both;*/
            /*clear: left;*/
            /*clear: right;*/
            clear: both;

            /*float: left;*/
        }
    </style>
</head>
<body>
<div class="div1">
</div>
<div class="div1">
</div>
<div class="div2">
</div>
</body>
</html>

在这里插入图片描述

4.4 overflow

  • 用于当内容溢出元素框时发生的事情

  • 属性
    Visible:默认值。内容不会被修剪，会呈现在元素框之外
    Hidden:内容会被修剪，并且其余内容是不可见的
    Scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
    Auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
    在这里插入图片描述

  • 注意1

display:none 元素隐藏不占位置
overflow:hidden; 将超出部分的元素隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*body , div, p{*/
            /*margin: 0;*/
            /*padding: 0;*/
            /*overflow: hidden;*/
        /*}*/
        .div-f{
            width: 300px;
            height: 300px;
            background: #ff371a;

            /*overflow: hidden;*/
        }
        .div-s{
            width: 400px;
            height: 100px;
            background: #3cff5f;
        }
    </style>
</head>
<body>
    <div class="div-f">
        <div  class="div-s">

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

前：/overflow: hidden;/
在这里插入图片描述
后： overflow: hidden;
在这里插入图片描述

visibility:hidden; 元素隐藏占位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            /*display: none;*/
            visibility: hidden;
        }
    </style>
</head>
<body>
    <hr>
    <div>
            div
    </div>
    <hr>
</body>
</html>

加display: none;前：
在这里插入图片描述
加display: none;后：
在这里插入图片描述

  • 注意2
    主要长宽单位（px 像素；% 相对于父元素的大小）
    line-height(设置行高)
    浏览器默认字体大小为:16px
    浏览器默认行高：18px

5.简单购票示例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .top{
            width: 100%;
            height: 80px;
            border-bottom: 1px solid #d8d8d8 ;
        }

        .body1{
            height: 2000px;
            width: 1200px;

            margin: 50px auto;
        }
        .body-left{
            width: 800px;
            height: 2000px;
            /*background: #ff371a;*/

            float: left;
        }
        .body-left-son1{
            width: 750px;
            height: 620px;
            /*background: whitesmoke;*/
            margin: 0 auto;
        }
        .hot-top{
            height: 35px;
            width: 100%;
            margin: 0 0 25px 0;
            /*background: #efff5f;*/
        }
        .hot-top-left{
            width: 200px;
            height: 35px;
            float: left;
            color: red;
            font-size: 28px;

        }
        .hot-top-right{
            width: 100px;
            height: 35px;
            float: right;
            color: red;
            font-size: 14px;
            text-align: right;
            margin-top: 14px;
        }
        .hot-body{
            width: 100%;
            height: 550px;
            /*background: #1659ff;*/
        }
        .hot-body-img{
            width: 160px;
            height: 260px;
            border: 1px solid #efefef;
            float: left;
            margin: 10px  10px  0  10px;
        }
        .div-img{
            width: 160px;
            height: 220px;
            position: relative;
        }
        .div-img-text{
            position:absolute;
            bottom: 14px;
            color: whitesmoke;
            left: 10px;
        }
        .div-img img{
            width: 100%;
            height: 100%;
        }

        .div-text{
            width: 160px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #ef4238;
        }
        .div-text:hover{
            color: whitesmoke;
            background: #ff371a;
        }

        .body-right{
            width: 350px;
            height: 2000px;
            background: #64ff41;
            float: right;
        }



        .foot{
            width: 100%;
            height: 262px;
            margin: 82px 0 0 0;
            padding: 56px 0 ;
            background: #262426;
            color: white;
            text-align: center;
        }
    </style>
</head>
<body>

    <div class="top"></div>
    <div class="body1">
        <div class="body-left">
            <div class="body-left-son1">
                <div class="hot-top">
                    <div class="hot-top-left">正在热映 (18部)</div>
                    <div class="hot-top-right"> 全部<b>></b> </div>
                </div>
                <div class="hot-body">
                    <div class="hot-body-img">

                        <div class="div-img">
                            <img src="https://p0.meituan.net/movie/72291e1cbc83311656e01e828ca79ddd2106074.jpg@160w_220h_1e_1c">
                            <div class="div-img-text">熊出没</div>
                        </div>
                        <div class="div-text">购票</div>
                    </div>
                    <div class="hot-body-img">
                        <div class="div-img">
                            <img src="https://p0.meituan.net/movie/48774506dc0e68805bc25d2cd087d1024316392.jpg@160w_220h_1e_1c">
                        </div>
                        <div class="div-text">购票</div>
                    </div>
                    <div class="hot-body-img">
                        <div class="div-img">
                            <img src="https://p0.meituan.net/movie/48774506dc0e68805bc25d2cd087d1024316392.jpg@160w_220h_1e_1c">
                        </div>
                        <div class="div-text">购票</div>
                    </div>
                    <div class="hot-body-img">
                        <div class="div-img">
                            <img src="https://p0.meituan.net/movie/48774506dc0e68805bc25d2cd087d1024316392.jpg@160w_220h_1e_1c">
                        </div>
                        <div class="div-text">购票</div>
                    </div>
                    <div class="hot-body-img">
                        <div class="div-img">
                            <img src="https://p0.meituan.net/movie/48774506dc0e68805bc25d2cd087d1024316392.jpg@160w_220h_1e_1c">
                        </div>
                        <div class="div-text">购票</div>
                    </div>
                    <div class="hot-body-img">
                        <div class="div-img">
                            <img src="https://p0.meituan.net/movie/48774506dc0e68805bc25d2cd087d1024316392.jpg@160w_220h_1e_1c">
                        </div>
                        <div class="div-text">购票</div>
                    </div>
                    <div class="hot-body-img">
                        <div class="div-img">
                            <img src="https://p0.meituan.net/movie/48774506dc0e68805bc25d2cd087d1024316392.jpg@160w_220h_1e_1c">
                        </div>
                        <div class="div-text">购票</div>
                    </div>
                    <div class="hot-body-img">
                        <div class="div-img">
                            <img src="https://p0.meituan.net/movie/48774506dc0e68805bc25d2cd087d1024316392.jpg@160w_220h_1e_1c">
                        </div>
                        <div class="div-text">购票</div>
                    </div>
                </div>
            </div>

        </div>
        <div class="body-right">

        </div>
    </div>
    <div class="foot">
        foot
    </div>

</body>
</html>
greyKing666
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
博客css模板
06-13
现在的个人空间都比较流行，作为非计算机专业的童鞋们来说自已做个博客是件多少难的事情，好不容易做出来一个博客却又不够美观。这款简洁的博客css模板就能帮助到大家哦，用Dreamweaver打开后将需要更改的文件改掉就成了自已的个个空间咯。有兴趣的话还可以看看里面的源代码，学习下网页制作。
CSS全解析：从基础到实战，掌握每一个知识点
最新发布
一杯梅子酱的博客
06-27 1215
以上就是CSS的全面解析，从基础属性到实战应用，涵盖了大部分常见的场景。掌握了这些知识，你将能够更加自信地设计和优化网页样式。继续探索CSS的无限可能，让创意成为现实！关注！
css中的＞
SundayGoG的博客
05-30 1670
参考：https://m.php.cn/article/477221.html .父元素>.子元素 等效于 .父元素{ .子元素{ } } 表示该层级父元素的下一层级的子元素，是嵌套结构的简便写法，当没有复杂的嵌套结构时，直接用第一种写法代替嵌套写法。 2.而 .父元素 .子元素{ } 表示该父元素下的所有子元素 ...
css
千霜的博客
11-28 1899
目录一、介绍二、基础知识2.1、应用css样式表2.1.1、外部样式 一、介绍 二、基础知识 css（Cascading Style Sheets）叠层样式表，用于改变网页样式，最终和html形成DOM（Document Object Model ），而浏览器则将DOM展示出来。过程如下： 一个最简单的例子： index.html: &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;a
CSS的“>”符号
u011549541的专栏
12-08 1500
转：http://wuliupo.blog.163.com/blog/static/452325920109272654902/ 1. >是子选择符 用于匹配直接后辈,孙辈就不匹配了。IE6 不支持，兴例： li:hover>a 子对象选择符，只对儿子起作用，对孙子不起作用。 li:hover a 后代选择符，对儿子，对孙子，对后代都起作用。
CSS重置
02-17
CSS重置 一个微小的默认CSS重置基于： 和 安装 NPM： npm install --save-dev css-reset 纱： yarn add css-reset 手动安装 首先，让我们克隆此存储库： git clone https://github.com/mlaurel/css-reset.git ...
bootstrap.min.css
02-23
用于渲染前端静态页面
bootstrap.css
01-27
bootstrap的css文件
HTML + CSS 实现淘宝页面首屏静态网页项目练习.zip
12-14
HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面...
LessCSS
07-22
资源名称：Less CSS内容简介：像写程序一样写 CSSLess CSS 是一个 CSS 预处理器，通过简单的语法和变量对 CSS 进行扩展，可减少很多 CSS 的代码量。LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数...
main.css:用于开发HTML5 Boilerplate CSS文件main.css的存储库
04-13
使用安装： npm install main.css并从生成的node_modules/main.css/dist文件夹中node_modules/main.css/dist所需的内容用安装： yarn add main.css并从生成的node_modules/main.css/dist文件夹中node
css3.0参考手册 css3.0参考手册
06-16
css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...
element.css文件
02-27
element.css文件
element-ui css
03-01
element-ui css
css博客
wang2385205187的博客
07-11 225
CSS总结 目录CSS总结一 CSS概念1.1 CSS语法二 CSS引入方式2.1 行内样式2.2 内部样式2.3 外部样式三 CSS选择器3.1 基本选择器3.2 组合选择器3.4 分组四 CSS属性相关4.1 基本属性4.2 字体属性4.3 文本颜色4.4 文字属性4.5 背景属性4.6 边框4.7 display属性4.8 CSS盒子模型4.9 定位(position)一 CSS概念1.1 CSS语法CSS引入方式2.1 行内样式2.2 内部样式2.3 外部样式三 CSS选择器3.1.1 标签
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值