css层叠样式表、盒子模型

最新推荐文章于 2023-05-07 21:49:00 发布

Relaxaaa

最新推荐文章于 2023-05-07 21:49:00 发布

阅读量159

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/Relaxaaa/article/details/112169095

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS

一、CSS是Cascading Style Sheet的简称，称为“层叠样式表”或者“级联样式表”，是一组格式设置规则，用于控制网页内容的外观，可将页面内容与表现形式分离。

二、1985年5月12日，W3C组织推出了CSS2,使得这项技术在世界范围内得到广泛的应用。

三、CSS3提供了非常多新途径去改善你的设计工作，且做了不少重要的变化。

优点

1、样式复用，有效的避免代码臃肿
2、方便网站的后期维护
3、对页面进行精准控制，实现精美、复杂的页面

基本语法

修改的样式：值；

根据书写位置分为

外部样式（也叫外联式）：将网页链接到外部样式表。
内部样式（也叫嵌入式）：在网页上创建嵌入的样式表。
行内样式（也叫内联式）：应用内嵌样式到各个网页元素。

行内样式

在指定标签中书写样式，仅在当前标签生效

<div style="border: solid; border-color: green;">
        <!-- 行内样式:书写在单个标签内并且只对当前标签产生作用的样式 -->
        <p>这是初始样例</p>
        <p style="background-color: pink;">这是样例</p>
        <p style="background-color: #ff00ff;font-size: 10px;">这是样例</p>
        <p style="font-size: 30px;border:double ; border-color: red;">这是样例</p>
</div>

内部样式

书写在当前页面内，对选择器选择的标签进行样式书写

<style>
/* 由选择器与样式组成 选择器{样式;样式;}*/
/* 可以使用这种方式为页面指定标签批量设置样式 */
p{
    color:red;
    background-color: black;
    /* 如果标签没有设置这个样式 那么都会自动设置 */
}
</style>

<!-- 使用<style>标签嵌入在HTML文档中，通常写在<head>与</head>之间这种方式方便在同页面中修改样式-->
    <div >
        <p>这是初始样例</p>
        <p>这是样例</p>
        <p>这是样例</p>
        <p>这是样例</p>
    </div>

外部样式

将样式内容书写纸以.css结尾的样式表文件中，在指定页面引入对指定选择的标签进行样式书写

外部样式书写与内部样式类似，只不过将书写在内部样式中的层叠样式书写在样式文件中，在指定页面进行引入

p{
    font-size: 30px;
    font-family: 隶书;
}

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

一般情况下进行样式书写使用外部样式（针对于前端开发人员），我们一般书写内部样式进行再已有样式的基础上进行修改。

当多个样式对同一标签相同属性进行设置是行内样式>内部样式>外部样式

选择器

css的选择器通常与样式表一起使用，由选择器动态选择需要进行指定样式添加的标签

https://www.w3school.com.cn/cssref/css_selectors.asp

选择器	例子	例子描述	CSS
.class	.intro	选择 class=“intro” 的所有元素。	1
#id	#firstname	选择 id=“firstname” 的所有元素。	1
*	*	选择所有元素。	2
element	p	选择所有元素。	1
element,element	div,p	选择所有元素和所有元素。	1
element element	div p	选择元素内部的所有元素。	1
element>element	div>p	选择父元素为元素的所有元素。	2
element+element	div+p	选择紧接在元素之后的所有元素。	2
[attribute]	[target]	选择带有 target 属性所有元素。	2
[attribute=value]	[target=_blank]	选择 target="_blank" 的所有元素。	2
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 “flower” 的所有元素。	2
[attribute\|=value]	[lang\|=en]	选择 lang 属性值以 “en” 开头的所有元素。	2
:link	a:link	选择所有未被访问的链接。	1
:visited	a:visited	选择所有已被访问的链接。	1
:active	a:active	选择活动链接。	1
:hover	a:hover	选择鼠标指针位于其上的链接。	1
:focus	input:focus	选择获得焦点的 input 元素。	2
:first-letter	p:first-letter	选择每个元素的首字母。	1
:first-line	p:first-line	选择每个元素的首行。	1
:first-child	p:first-child	选择属于父元素的第一个子元素的每个元素。	2
:before	p:before	在每个元素的内容之前插入内容。	2
:after	p:after	在每个元素的内容之后插入内容。	2
:lang(language)	p:lang(it)	选择带有以 “it” 开头的 lang 属性值的每个元素。	2
element1~element2	p~ul	选择前面有元素的每个元素。	3
[attribute^=value]	a[src^=“https”]	选择其 src 属性值以 “https” 开头的每个元素。	3
[attribute$=value]	a[src$=".pdf"]	选择其 src 属性以 “.pdf” 结尾的所有元素。	3
[attribute=value*]	a[src*=“abc”]	选择其 src 属性中包含 “abc” 子串的每个元素。	3
:first-of-type	p:first-of-type	选择属于其父元素的首个元素的每个元素。	3
:last-of-type	p:last-of-type	选择属于其父元素的最后元素的每个元素。	3
:only-of-type	p:only-of-type	选择属于其父元素唯一的元素的每个元素。	3
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个元素。	3
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个元素。	3
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。	3
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个元素的每个元素。	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。	3
:last-child	p:last-child	选择属于其父元素最后一个子元素每个元素。	3
:root	:root	选择文档的根元素。	3
:empty	p:empty	选择没有子元素的每个元素（包括文本节点）。	3
:target	#news:target	选择当前活动的 #news 元素。	3
:enabled	input:enabled	选择每个启用的元素。	3
:disabled	input:disabled	选择每个禁用的元素	3
:checked	input:checked	选择每个被选中的元素。	3
:not(selector)	:not§	选择非元素的每个元素。	3
::selection	::selection	选择被用户选取的元素部分。	3

.class选择器

用于选择多个拥有相同class值的指定标签（多个标签可以不同）

#id选择器

用于选择拥有指定id值的标签（id在当前页面通常只有一个）

通用选择器

选择页面中所有标签

标签选择器

直接以标签进行选择，当前页面指定标签设置指定样式

子类选择器

选择指定标签指定子标签进行样式设定

属性选择器

通过指定属性或属性的值进行标签的选择

盒子模型

在浏览器这个框框中，用多个框框进行分割，以这种风格进行页面的布局排版使用的就是盒子模型

盒子属性

margin（外边距/边界）：控制多个盒子直接的距离

border（边框）：每个盒子的厚度

padding（内边距/填充）：盒子中存储元素距离盒子边框的距离

注意：由于使用了盒子模型。所以在页面中的元素实际的距离应为当前盒子内边距+当前盒子边框+当前盒子外边距+指定盒子外边距+指定盒子边框+指定盒子内边距

border边框

border-style:solid; （dotted,dashed,double)
border-width:1px;
border-color:#f00;
border:1px solid #0f0; （顺序：宽、样式、颜色
border-bottom-style:dotted; (top、right、left)
border-bottom-width:5px;
border-bottom-color:#F93;
border-bottom:3px double #90C

注意：在进行边框设置时一般样式宽度颜色一同设置（因为宽度默认3 颜色默认透明样式默认隐藏）

 <style type="text/css">
    div{
        height: 300px;
        width: 300px;
        background-color: cornflowerblue;
    }
    .d1{
        /* border-style: solid;
        border-width: 20px; 
        border-color: crimson; */
        /* 简化写法 */
        border:10px solid greenyellow;
    }
    .d2{
        /* border-left-style: solid;
        border-left-width: 20px;
        border-left-color:red ; */
        border-left: 20px solid red;
        /* border-right-style: solid;
        border-right-width: 20px;
        border-right-color:green ; */
        border-right: 20px solid green;
        /* border-bottom-style: solid;
        border-bottom-width: 20px;
        border-bottom-color:black ; */
        border-bottom: 20px solid black;
        /* border-top-style: dotted;
        border-top-width: 20px;
        border-top-color:black ; */
        border-top: 20px dotted black;
    }
    </style>
</head>
<body>
    <div class="d1">

    </div>

    <div class="d2">

    </div>

</body>

background背景

background-color:#f00;
background-image:url(…/images/bg.jpg);
background-repeat:no-repeat; (repeat-x,repeat-y, repeat)
background-position:1px 3px ;
对应水平位置、垂直位置
数值单位：px 或%
也可以是关键字,水平：left,center,right,垂直：top,center,bottom
background-attachment:fixed;
background: #ff0 url(…/images/bg.jpg) no-repeat fixed 10px 50%;

        .d3 {
            height: 600px;
            /* background-image: url("../img/sdwlb.gif");
            background-repeat: no-repeat;
            background-position: center;
            background-attachment:fixed; */
            background: #ff0 url(../img/sdwlb.gif)  no-repeat  fixed center;
        }

padding内边距

div的宽高如果没有指定高度由内容与内边距决定，宽度默认一行

 div{
          
            background-color: turquoise;
            /* padding-left: 50%; 
            padding:10px;//设置四周边距
            padding:2px 5px; //设置上下  左右边距
            padding:2px 3px 4px;//设置 上 左右  下边距
            padding:1px 2px 3px 4px;//设置上  右 下 左 边距
            padding:10px;
        }

margin外边距

当前盒子距离父盒子边框的距离

margin-top:10px; (right,bottom,left)
margin:10px;
margin:2px 5px;
margin:2px 3px 4px;
margin:1px 2px 3px 4px;
margin:0 auto;

<style type="text/css">
        div {
            height: 500px;
            width: 500px;
            background-color: tomato;
        }
        .d1 {
            width: 100px;
            height: 100px;
            background-color: turquoise;
            margin:  0 auto;
        }

        body {
            margin: 0px;
        }
    </style>
</head>

<body>
    <div>
        <div class="d1">这是div中的内容</div>
    </div>
</body>

display显示隐藏

用于块级元素的显示与隐藏（不是仅仅只有这种方式）

  <style type="text/css">
        div {
            height: 200px;
            width: 200px;
        }
        .d1 {
            background-color: tomato;
              display: none;  
            /* 整个块都消失  在页面找不到相应存在 原位置会空出来 */
            /* display: block; */
            /* 原本的块级样式 前后自带换行符 */
             /* display: inline; */
            /* 整个块都消失  在页面可以找到存在 只不过0x0大小 */
            /* display: inline-block; */
        }

        .d2 {
            background-color: thistle;
        }
    </style>
</head>

<body>
    <div class="d1"></div>
    <div class="d2"></div>

</body>

颜色

在css中颜色的书写分为3中方式

颜色的英文标识

以三原色进行书写rgb(255,255,255)

以16进制进行书写#FF FF FF（如果存在连续的两个可以省略，仅当单个颜色重复时使用）

在颜色配比中一共存在256*256*256种配色但是由于软硬件限制，所以仅保留了一下颜色进行使用

Relaxaaa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css层叠样式表、盒子模型

CSS一、CSS是Cascading Style Sheet的简称，称为“层叠样式表”或者“级联样式表”，是一组格式设置规则，用于控制网页内容的外观，可将页面内容与表现形式分离。二、1985年5月12日，W3C组织推出了CSS2,使得这项技术在世界范围内得到广泛的应用。三、CSS3提供了非常多新途径去改善你的设计工作，且做了不少重要的变化。优点1、样式复用，有效的避免代码臃肿2、方便网站的后期维护3、对页面进行精准控制，实现精美、复杂的页面基本语法修改的样式：值；根据书写位置分为外部样
复制链接

扫一扫