前端-css讲解

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
elementp选择所有

元素。

1
element,elementdiv,p选择所有
元素和所有

元素。

1
element elementdiv p选择
元素内部的所有

元素。

1
element>elementdiv>p选择父元素为
元素的所有

元素。

2
element+elementdiv+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
:linka:link选择所有未被访问的链接。1
:visiteda:visited选择所有已被访问的链接。1
:activea:active选择活动链接。1
:hovera:hover选择鼠标指针位于其上的链接。1
:focusinput:focus选择获得焦点的 input 元素。2
:first-letterp:first-letter选择每个

元素的首字母。

1
:first-linep:first-line选择每个

元素的首行。

1
:first-childp:first-child选择属于父元素的第一个子元素的每个

元素。

2
:beforep:before在每个

元素的内容之前插入内容。

2
:afterp:after在每个

元素的内容之后插入内容。

2
:lang(language)p:lang(it)选择带有以 “it” 开头的 lang 属性值的每个

元素。

2
element1~element2p~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-typep:first-of-type选择属于其父元素的首个

元素的每个

元素。

3
:last-of-typep:last-of-type选择属于其父元素的最后

元素的每个

元素。

3
:only-of-typep:only-of-type选择属于其父元素唯一的

元素的每个

元素。

3
:only-childp: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-childp:last-child选择属于其父元素最后一个子元素每个

元素。

3
:root:root选择文档的根元素。3
:emptyp:empty选择没有子元素的每个

元素(包括文本节点)。

3
:target#news:target选择当前活动的 #news 元素。3
:enabledinput:enabled选择每个启用的 元素。3
:disabledinput:disabled选择每个禁用的 元素3
:checkedinput: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(如果存在连续的两个可以省略,仅当单个颜色重复时使用)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

简单哟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值