【转】 web前端基础知识-(二)CSS基本操作

【转】 web前端基础知识-(二)CSS基本操作

1. 概述

css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化。

存在方式有三种:元素内联、页面嵌入和外部引入,比较三种方式的优缺点。

语法:style = 'key1:value1;key2:value2;'

  • 行内式:

在标签中使用 style='xx:xxx;'单独加在某个标签上,style增加其他属性需要以分号分隔;

<div style="background-color:darkgrey;height: 100px;width:100px">我是div
</div>
  • 嵌入式:

在页面中嵌入 < style type="text/css"> </style >块

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color:darkgrey;
height: 100px;
width:100px;
}
</style>
</head>
  • 链接式:

将.css文件引入到HTML文件中,创建一个.css文件,将css文件放入link标签中

<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
</head>
  • 导入式:

将一个独立的.css文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件,<style>标记也是写在<head>标记中

<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
@import"mystyle.css"; #此处要注意.css文件的路径
</style>
</head>

注意:import 会先解析页面所有信息,先不会渲染页面,等待所有信息加载后再渲染页面,如果加载慢会出现无渲染页面,导致用户体验不好,推荐使用嵌入式和链接式

2. CSS选择器

2.1 基础选择器

2.1.1 通用元素选择器

通用元素选择器,匹配任何元素

*{
color: darkgrey;
}

2.1.2 标签选择器

匹配所有使用XX标签的元素;

例如,需要选择所有标签为div的元素设置样式

div{
color: grey;
background-color: antiquewhite;
}

2.1.3 class选择器

.info 或E.info :class属性选择器,匹配所有class属性中包含info的元素,class属性可以重复,即多个class属性相同的元素;

.cs1{
color: grey;
background-color: antiquewhite;
}
<div class="cs1">我是div1标签</div>
<div class="cs1">我是div2标签</div>
<p class="cs1">我是p标签</p>

<!-- 以上三个标签都会变成.cs1的样式 -->

2.1.4 id选择器

#info或E#info :id属性选择器,匹配所有id属性等于info的元素

#cs1{
color: grey;
background-color: antiquewhite;
}
<div id="cs1">我是div1标签</div>
<div class="cs1">我是div2标签</div>

<!-- 以上标签,只有id=cs1的标签会变成#cs1的样式-->

2.2 组合选择器

2.2.1 多元素选择器

E,F:多元素选择器,同时匹配所有E标签元素或F标签元素,E和F之间用逗号分隔

div,p{
color: grey;
background-color: antiquewhite;
}
<div id="cs1">我是div1标签</div>
<p class="cs1">我是p标签</p>
<span>我是span</span>

<!-- 以上标签,除span标签,即div和p标签都会变成设置的样式-->

2.2.2 后代元素选择器

E F:后代元素选择器,匹配所有属于E标签元素后代的F标签元素,即所有类似形式的所有后代,子子孙孙,E和F之间用空格分隔;

div p{
color: grey;
background-color: antiquewhite;
}
<div id="cs1">
  <p class="cs1">我是p1标签</p>
  <div class="cs3">
    <p class="cs1">我是p2标签</p>
    <div class="cs2">
      <p id="cs1">我是p3标签</p>
    </div>
  </div>
</div>

<!-- 以上标签,p1、p2、p3均会变成设置的样式 -->
<!-- 扩展:可以结合基础选择器使用,例如div #cs1,div .cs1等 -->

2.2.3 子元素选择器

E > F :子元素选择器,匹配所有E元素的子元素F,只匹配到子元素,子元素的子元素匹配不到;

<style>
#outer>.c1{
color: aqua;
}
</style>
<div id="outer">
    <p class="c1">p1.....</p>
    <div class="c2">
        <p class="c1">p2....</p>
    </div>
</div>

<!-- 以上标签,p1会变成设置的样式,p2不会变,即儿子辈的会变,儿子辈的后代不会变-->
    

2.2.4 毗邻元素选择器

E + F:毗邻元素选择器,匹配所有紧随E元素之后的同级元素F ,即只匹配挨着的下一个F元素,如不相邻也不起作用;

<style>
#outer+.c1{
color: aqua;
}
</style>
<p class="c1">p1....</p>
<div id="outer">
</div>
<p class="c1">p2.....</p>
<div class="c1">div1...</div>

<!-- 以上标签,p1不会变更样式,p2为挨着的下一个class=c1的元素,所以p2会变更样式,div1的class属性也满足但并未挨着id=outer的元素,故不起作用 -->

2.3 属性选择器

根据属性进行筛选匹配,只有第一个input标签匹配上对应的样式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[name="James"]{width: 20px;height: 20px;}
    </style>
</head>
<body>
    <input type="text" name="James">
    <input type="text">
    <input type="password">
</body>

3. 常用属性

3.1 颜色属性

color:

①英文单词形式,例如:red,yellow

②编码形式,例如:#cc3399,如双重可简写#c39

③基调颜色透明度设置,例如:rgb(255,255,255,0.5),red、green、blue三色透明度设置,最后一个值设置透明度

3.2 字体属性

font-size: 20px/50%/larger 设置字体大小;

font-family:'Lucida Bright' 文本的字体系列;

font-weight: lighter/bold/border/ 字体的粗细;

font-style:normal/oblique/italic 文本的字体样式;

3.3 背景属性

background-color: 背景底色;

background-image: 背景图片;

background-repeat:平铺方式,no-repeat 不平铺,repeat 平铺满;

background-size: 图片大小设置,auto;

background-position:center 上下左右居中;left center左侧上下居中;top,bottom,right类似;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 100px;"></div>
    <div style="background-image: url(icon_18_118.png);background-repeat:no-repeat;height: 20px;width:20px;border: 1px solid red;"></div>
</body>
</html>

 

3.4 文本属性

text-align:center 文本居中

line-height:xxpx;行高 ,针对文本处理

width:xxpx;宽 %50

height:xxpx;高 %50

text-indent:xxpx 首行缩进,基于父元素

letter-spacing:xxpx;字母与字母之间距离

word-spacing:xxpx ;单词之间距离

direction:rt1

text-transform:capitalize;将单词首字母大写

min-height:设置默认最小高度

height:auto!important 以此样式为准

vertical-align:xxpx;垂直居中

opacity:0.3 透明度

3.5 CSS样式边框

border-style:solid;边框样式

border-color:red;边框颜色

border-width:1px;边框宽度

border-radius:20%;边框变成圆角

border

在一个声明中设置所有的边框属性。

border-bottom

在一个声明中设置所有的下边框属性。

border-bottom-color

设置下边框的颜色。

border-bottom-style

设置下边框的样式。

border-bottom-width

设置下边框的宽度。

border-color

设置四条边框的颜色。

border-left

在一个声明中设置所有的左边框属性。

border-left-color

设置左边框的颜色。

border-left-style

设置左边框的样式。

border-left-width

设置左边框的宽度。

border-right

在一个声明中设置所有的右边框属性。

border-right-color

设置右边框的颜色。

border-right-style

设置右边框的样式。

border-right-width

设置右边框的宽度。

border-style

设置四条边框的样式。

border-top

在一个声明中设置所有的上边框属性。

border-top-color

设置上边框的颜色。

border-top-style

设置上边框的样式。

border-top-width

设置上边框的宽度。

border-width

设置四条边框的宽度。

outline

在一个声明中设置所有的轮廓属性。

outline-color

设置轮廓的颜色。

outline-style

设置轮廓的样式。

outline-width

设置轮廓的宽度。

border-bottom-left-radius

定义边框左下角的形状。

border-bottom-right-radius

定义边框右下角的形状。

border-image

简写属性,设置所有 border-image-* 属性。

border-image-outset

规定边框图像区域超出边框的量。

border-image-repeat

图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)

border-image-slice

规定图像边框的向内偏移。

border-image-source

规定用作边框的图片。

border-image-width

规定图片边框的宽度。

border-radius

简写属性,设置所有四个 border-*-radius 属性。

border-top-left-radius

定义边框左上角的形状。

border-top-right-radius

定义边框右下角的形状。

box-decoration-break

 

box-shadow

向方框添加一个或多个阴影。

简写方式:

border: solid 1px red

3.6 CSS样式浮动

正常文档流:将元素(标签)在进行排版布局时按照从上到下、从左到右的顺序分布排版的流;

脱离文档流:将元素从文档流中取出,进行覆盖,其他元素会按文档流中不存在该元素重新布局;

float 浮动标签属性(非完全脱离):

假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行);如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。

注意:当初float被设计的时候就是用来完成文本环绕的效果,所以文本不会被挡住,这是float的特性,即float是一种不彻底的脱离文档流方式。

floatleftrightboth

清除浮动: clear : none | left | right | both

none : 默认值。允许两边都可以有浮动对象

left : 不允许左边有浮动对象

right : 不允许右边有浮动对象

both : 不允许有浮动对象

<style>
    #div4{
        border:solid 1px lavender;
        background-color: rebeccapurple;
        height: 100px;
    }
    #div1{
        background-color: darkolivegreen;
        height: 100px;
        width: 980px;
        margin: auto;
    }
    #div2{
        border-left: solid 1px lavender;
        height: 100px;
        width: 100px;
        background-color: darkgray;
        float: left;
    }
    #div3{
        border-left: solid 1px lavender;
        height: 100px;
        width: 100px;
        background-color: darkgray;
        float: left;
    }
    #clear{
        clear:both;
    }
</style>
<div id="div4">
    <div id="div1">
        <div id="div2">div2</div>
        <div id="div3">div3</div>
    </div>
    <div id="clear"></div>
</div>

注:div2和div3使用float浮动起来,如想将div4的样式显示出来,需增加一个clear标签将架子撑起来,清除浮动

清除浮动第二种方法,overflow:hidden 将溢出的信息隐藏

overflow:auto;不光隐藏并出现滚动条

3.7 CSS样式display

块级标签和行内标签相互转换

<body>
    <div style="background-color: red;display: inline">块级</div>
    <span style="background-color: #2459a2;display: block">行内</span>
</body>

注:display:inline 转换为行内标签;display:block转换为块级标签;另还有display:none不显示

行内标签:无法设置高度,宽度,padding margin
块级标签:设置高度,宽度,padding margin

<body>
    <span style="background-color: #2459a2;display: inline-block;height: 50px;width: 70px">行内</span>
    <div style="background-color: red;display: inline">块级</div>
</body>

注:display:inline-block 既有inline的属性(默认自己有多少占多少)又有block的属性(可以设置高度、宽度、padding、margin)

3.8 CSS样式边距

外边距margin

<body>
    <div style="border: 2px solid red;height: 70px;">
        <div style="background-color: green;height: 50px;
        margin-top: 25px;"></div>
    </div>
</body>

内边距padding

<body>
    <div style="border: 2px solid red;height: 70px;">
        <div style="background-color: green;height: 50px;
        padding-top: 25px;"></div>
    </div>
</body>

4 其他

4.1 position

4.1.1 介绍

Position 属性:规定元素的定位类型。即元素脱离文档流的布局,在页面的任意位置显示。

1、主要的值:

absolute :绝对定位;脱离文档流的布局,遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static),否则为Body文档本身。

relative :相对定位;不脱离文档流的布局,只改变自身的位置,在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。

fixed :固定定位;类似于absolute,但不随着滚动条的移动而改变位置。

static :默认值;默认布局。

2、辅助属性:

position属性只是使元素脱离文档流,要想此元素能按照希望的位置显示,就需要使用下面的属性(position:static不支持这些):

①left : 表示向元素的左边插入多少像素,使元素向右移动多少像素。

②right :表示向元素的右边插入多少像素,使元素向左移动多少像素。

③top :表示向元素的上方插入多少像素,使元素向下移动多少像素。

④bottom :表示向元素的下方插入多少像素,使元素向上移动多少像素。

上面属性的值可以为负,单位:px 。

4.1.2 定位方式

  • position:absolute

绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>;

Absolutely定位使元素的位置与文档流无关,因此不占据空间。

Absolutely定位的元素和其他元素重叠。

h2
{
position:absolute;
left:100px;
top:150px;
}
  • positon:relative

相对定位元素的定位是相对其正常位置。

可以移动的相对定位元素的内容和相互重叠的元素,它原本所占的空间不会改变。

一般与absolute配合使用;

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

    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
        <div style="position: absolute;left:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
    </div>
    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">

        <div style="position: absolute;right:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
    </div>
    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">

        <div style="position: absolute;right:0;top:0;width: 50px;height: 50px;background-color: black;"></div>
    </div>
</body>
</html>

 

  • position:fixed

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 48px;
            background-color: black;
            color: #dddddd;
            position: fixed;
            top:0;
            right: 0;
            left: 0;
        }
        .pg-body{
            background-color: #dddddd;
            height: 5000px;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="pg-header">头部</div>
    <div class="pg-body">内容</div>
</body>
</html>

4.2 hover

适用于光标(鼠标指针)指向一个元素,但此元素未被激活时的样式.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position: fixed;
            right: 0;
            left: 0;
            top: 0;
            height: 48px;
            background-color: #2459a2;
            line-height: 48px;
        }
        .pg-body{
            margin-top: 50px;
        }
        .w{
            width: 980px;
            margin: 0 auto;
        }
        .pg-header .menu{
            display: inline-block;
            padding: 0 10px 0 10px;
            color: white;
        }
        /*当鼠标移动到当前标签上时,以下css属性才生效*/
        .pg-header .menu:hover{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="w">
            <a class="logo">LOGO</a>
            <a class="menu">全部</a>
            <a class="menu">42区</a>
            <a class="menu">段子</a>
            <a class="menu">1024</a>
        </div>
    </div>
    <div class="pg-body">
        <div class="w">a</div>
    </div>
</body>
</html>

4.3 overflow

overflow属性指定如果内容溢出一个元素的框,会发生什么。

visible

默认值。内容不会被修剪,会呈现在元素框之外。

hidden

内容会被修剪,并且其余内容是不可见的。

scroll

内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

auto

如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 200px;width: 300px;overflow: auto">
        <img src="http://img05.tooopen.com/images/20140604/sy_62331342149.jpg">
    </div>

    <div style="height: 200px;width: 300px;overflow: hidden">
        <img src="http://img05.tooopen.com/images/20140604/sy_62331342149.jpg">
    </div>
</body>
</html>

4.4 z-index

z-index 属性指定一个元素的堆叠顺序。

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注意: z-index 进行定位元素(position:absolute, position:relative, or position:fixed)。

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

 

4.5 opacity

设置一个div元素的透明度级别:0-1

div
{
opacity:0.5;
}

 

posted @ 2020-10-13 21:23  CLASSIC~W  阅读(127)  评论(0编辑  收藏  举报