前端之CSS

时间：2019-05-29 22:05:34 阅读：148 评论：0 收藏：0 [点我收藏+]

CSS介绍

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

CSS的实例

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

CSS的注释

/*这是单行注释*/

/*这是多行注释*/

CSS的引入方式

1.行内式

行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。

<p style="color: red">Hello world.</p>

2.嵌入式

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：

<head>

    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

3.外部样式

外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。

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

CSS选择器

基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*这是单行注释*/
        /*这是*/
        /*多行*/
        /*注释*/

        /*标签选择器*/
        p{
            color:red;
        }

        /*id选择器*/
        #s1 {
            font-size: 24px;
        }

        /*类选择器*/
        .c1{
            color: blue;
        }
    </style>
</head>
<body>
<span id="s1">回首掏，鬼刀一开，看不见，走位走位，手里干。</span>
<div class="c1">回首掏，鬼刀一开，看不见，走位走位，手里干。
    <p>回首掏，鬼刀一开，看不见，走位走位，手里干。
        <span>回首掏，鬼刀一开，看不见，走位走位，手里干。</span>
    </p>
</div>
<div class="c1">回首掏，鬼刀一开，看不见，走位走位，手里干。</div>
</body>
</html>

基本选择器

标签选择器

    p{color:red; }

ID选择器

 #s1 {font-size: 24px;}

类选择器

 .c1{color: blue;}

通用选择器

* {
  color: white;
}

组合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器，div标签里的所有span标签*/
        div span{
            color: red
        }

        /*儿子选择器,div标签下面的第一层span标签*/
        div>span{
            color: blue;
        }

        /*弟弟选择器（对下不对上）,div下面的同级的所有span*/
        div~span{
            color: blueviolet;
        }

        /*毗邻选择器（对下不对上），div下面的第一个span*/
        div+span{
            color: yellow;
        }
    </style>
</head>
<body>
<span>我是div上面的span</span>
<div>
    <span>我是div里面的第一个span</span>
    <p>我是div里面的第一个p
        <span>我是div里面的第一个p里面的span</span>
    </p>
    <span>我是div里面的第二个span</span>
</div>
<span>我是div下面的第一个span</span>
<span>我是div下面的第二个span</span>
</body>
</html>

组合选择器

后代选择器(空格) div标签里的所有span标签

div span{
    color: red
}

儿子选择器(>) div标签下面的第一层span标签

  div>span{
            color: blue;
        }

弟弟选择器(~) (对下不对上）,div下面的同级的所有span

  div~span{
            color: blueviolet;
        }

毗邻选择器(+) （对下不对上），div下面的第一个span

  div+span{
            color: yellow;
        }

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*找寻所有含有xxx属性的标签*/
        [xxx]{
            color: yellow;
        }
        /*找寻含有xxx=‘2‘属性的标签*/
        [xxx="2"]{
            color: blueviolet;
        }
        /*找寻p标签内含有xxx=‘2‘属性的标签*/
        p[xxx="2"]{
            color: red;
        }
    </style>
</head>
<body>
<span xxx="2">span</span>
<p xxx>我只有属性名</p>
<p xxx="1">我有属性名和属性值并且值为1</p>
<p xxx="2">我有属性名和属性值并且值为2</p>
</body>
</html>

属性选择器

/*找寻所有含有xxx属性的标签*/
[xxx]{
    color: yellow;
}
/*找寻含有xxx=‘2‘属性的标签*/
[xxx="2"]{
    color: blueviolet;
}
/*找寻p标签内含有xxx=‘2‘属性的标签*/
p[xxx="2"]{
    color: red;
}

分组与嵌套

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

        /*分组*/
        div,p,span{
            color:red;
        }

        /*嵌套:不同的选择器可以共用一个样式
        后代选择器与标签组合使用*/
        div+p,span{
            color: blue;
        }
    </style>

</head>
<body>

<div>div</div>
<p>p</p>
<span>span</span>

</body>
</html>

分组与嵌套

分组

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

例如：

div, p {
  color: red;
}

上面的代码为div标签和p标签统一设置字体为红色。

通常，我们会分两行来写，更清晰:

div,
p {
  color: red;
}

嵌套

多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。

.c1 p {
  color: red;
}

伪类选择器

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

        /*未访问的链接*/
        a:link{
            color: blue;
        }
        /*鼠标移动到链接上*/
        a:hover{
            color: red;
        }
        /*选定的链接*/
        a:active{
            color: blueviolet;
        }
        /*已访问的链接*/
        a:visited{
            color: yellow;
        }
        /*input输入框获取焦点时样式*/
        input:focus {
          outline: none;
          background-color: #eee;
        }
    </style>
</head>
<body>

<a href="https://www.baidu.com">百度</a>
<a href="http://www.xiaohuar.com">校花网</a>
<a href="http://www.sogo.com">搜狗网</a>

</body>
</html>

伪类选择器

        /*未访问的链接*/
        a:link{
            color: blue;
        }
        /*鼠标移动到链接上*/
        a:hover{
            color: red;
        }
        /*选定的链接*/
        a:active{
            color: blueviolet;
        }
        /*已访问的链接*/
        a:visited{
            color: yellow;
        }
        /*input输入框获取焦点时样式*/
        input:focus {
          outline: none;
          background-color: #eee;
        }

伪元素选择器

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

        /*p标签下的首字母大写*/
        p:first-letter{
            font-size: 48px;
            color: blueviolet;
        }

        /*在p标签之前插入"*"*/
        p:before{
            content: "*";
            color: red;
        }

        /*在p标签之后插入"？"*/
        p:after{
            content: "?";
            color: blue;
            font-size: 48px;
        }

    </style>
</head>
<body>

<p>继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的</p>
<p>继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的</p>
<p>继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的</p>
<p>继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的</p>
<p>继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的</p>


</body>
</html>

伪元素选择器

     /*p标签下的首字母大写*/
        p:first-letter{
            font-size: 48px;
            color: blueviolet;
        }

        /*在p标签之前插入"*"*/
        p:before{
            content: "*";
            color: red;
        }

        /*在p标签之后插入"？"*/
        p:after{
            content: "?";
            color: blue;
            font-size: 48px;
        }

选择器的优先级

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

        /*id选择器*/
        #p1 {
            color: green;
            font-size: 48px;
        }

        /*类选择器*/
        .c1{
            color: red;
            font-size: 48px;
        }

        /*标签选择器*/
        p {
            color: blueviolet;
            font-size: 48px;
        }
    </style>
    <link rel="stylesheet" href="mycss.css" >
</head>
<body>

<!--行内选择器-->
<p id="p1" class="c1" style="color: blue ; font-size: 24px">回首掏，鬼刀一开，看不见，走位走位，手里干。</p>
</body>
</html>

选择器的优先级

选择器优先级
相同选择器不同的引入方式就进原则谁越靠近标签谁输了算
不同选择器相同的引入方式行内样式 > id选择器> 类选择器 > 标签选择器

我们上面学了很多的选择器，也就是说在一个HTML页面中有很多种方式找到一个元素并且为其设置样式，那浏览器根据什么来决定应该应用哪个样式呢？

其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：

文字字体

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

        /*块儿级标签的长宽*/
        div {
            width: 200px;
            height: 200px;
        }
        /*标签中字体的样式*/
        p{
            font-family: "微软雅黑","Arial";
        }
        /*标签中字体的大小*/
        p{
            font-size: 24px;
        }
        /*标签中字体的粗细*/
        p{
            font-weight: bold;
        }
        /*文本颜色的修改*/
        p{
            color: rgba(0,0,255,0.8);
            /*color: blue;*/
            /*color: rgb(0,0,255);*/
            /*color: #FF6700;*/
        }


    </style>
</head>
<body>

<div>回首掏，鬼刀一开，看不见</div>
<p>走位走位，手里干。</p>


</body>
</html>

文字字体

font-family

可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。

简单实例：

body {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

字体大小（font-size）

p {
  font-size: 14px;
}

如果设置成inherit表示继承父元素的字体大小值。

字重（粗细）

   p{
            font-weight: bold;
        }

font-weight

用来设置字体的字重（粗细）。

值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，而700等同于bold
inherit	继承父元素字体的粗细值

文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

   p{
            color: rgba(0,0,255,0.8);
            /*color: blue;*/
            /*color: rgb(0,0,255);*/
            /*color: #FF6700;*/
        }

文字对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*使标签内的内容多出删除线*/
        p{
            text-decoration: line-through;
        }
        /*首行缩进*/
        p{
            text-indent: 48px;
        }
        /*去掉网址下方的下划线*/
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>

<p>回首掏，鬼刀一开，看不见，走位走位，手里干。</p>
<a href="http://www.xiaohuar.com">校花网</a>

</body>
</html>

文本属性

text-align

属性规定元素中的文本的水平对齐方式。

值	描述
left	左边对齐默认值
right	右对齐
center	居中对齐
justify	两端对齐

文字装饰

text-decoration

属性用来给文字添加特殊效果。

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	继承父元素的text-decoration属性的值。

常用的为去掉a标签默认的自划线：

a {
  text-decoration: none;
}

首行缩进（text-indent）

将段落的第一行缩进 32像素：

p {
  text-indent: 32px;
}

背景属性（background）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div标签的长宽*/
        div{
            width: 400px;
            height: 400px;
            }

        div{
            background-position: center;
        }
        /*div背景颜色*/
        div{
            background-color: blue;
        }
        /*div的背景图片*/
        div{
            background-image: url("1.png");
        }
        /*div中内容的颜色*/
        div{
            color: blueviolet;
        }
        /*简写版本*/
        /*div{*/
        /*     background: no-repeat center url("") blue;*/
        /*}*/


    </style>
</head>
<body>

<div>回首掏，鬼刀一开，看不见，走位走位，手里干</div>


</body>
</html>

背景属性

/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url(‘1.jpg‘);
/*
 背景重复
 repeat(默认):背景图片平铺排满整个网页
 repeat-x：背景图片只在水平方向上平铺
 repeat-y：背景图片只在垂直方向上平铺
 no-repeat：背景图片不平铺
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/

支持简写：

background:#336699 url(‘1.png‘) no-repeat left top;

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

    <style>
        .c1 {
            height: 400px;
            background-color: tomato;
        }
        /*box类的背景图是固定不动的*/
        .box {
            height: 400px;
            background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg");
            background-attachment: fixed;
        }
        .c2 {
            height: 400px;
            background-color: red;
        }
        .c3 {
            height: 400px;
            background-color: fuchsia;
        }


    </style>



</head>
<body>

<div class="c1"></div>
<div class="box"></div>
<div class="c2"></div>
<div class="c3"></div>

</body>
</html>

背景图片示例

边框属性

border-width
border-style
border-color

#i1 {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

通常使用简写方式：

#i1 {
  border: 2px solid red;
}

边框（border）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border-width: 4px; /*边框的高度*/
            border-style: dashed ;/*边框的类型*/
            border-color:deeppink; /*边框的颜色*/
        }
        /*简写版本*/
        /*div{*/
        /*    border: 3px dashed red;*/
        /*}*/
    </style>
</head>
<body>

<div>回首掏，鬼刀一开，看不见，走位走位，手里干。</div>

</body>
</html>

边框

边框样式

值	描述
none	无边框。
dotted	点状虚线边框。
dashed	矩形虚线边框。
solid	实线边框。

除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：

#i1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}

画圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
             div {
            width: 400px;
            height: 400px;
            background-color: red;/*圆内的颜色*/
            border: 3px solid black;/*边框的属性*/

            border-radius: 50%;
        }

    </style>
</head>
<body>


<div>回首掏，鬼刀一开，看不见看不见，走位走位，手里干</div>


</body>
</html>

画圆

display 属性

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

        <style>
            /*元素存在，但不会显示*/
        /*div {*/
            /*display: none;*/
        /*}*/
        /*inline将块儿级标签变成行内标签*/
        /*div {*/
            /*display: inline;*/
        /*}*/
        /*span   {*/
        /*    display: block;*/
        /*}*/
        /*将选择的标签既具有行内标签特点又有块儿级标签的特点*/
        span {
            display: inline-block;
            height: 100px;
            width: 100px;
            background-color: blue;
            border: 3px solid black;
        }

    </style>


</head>
<body>

<div>回首掏</div>
<div>鬼刀一开</div>
<span>走位走位</span>
<span>看不见，手里干</span>

</body>
</html>

View Code

用于控制HTML元素的显示效果。

值	意义
display:"none"	HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block"	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline"	按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block"	使元素同时具有行内元素和块级元素的特点。

display:"none"与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

技术分享图片

前端之CSS

原文：https://www.cnblogs.com/wangtenghui/p/10943833.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)

前端之CSS

CSS介绍

CSS的实例

CSS的引入方式

1.行内式

2.嵌入式

3.外部样式

CSS选择器

基本选择器

标签选择器

ID选择器

类选择器

通用选择器

组合选择器

后代选择器(空格) div标签里的所有span标签

儿子选择器(>) div标签下面的第一层span标签

弟弟选择器(~) (对下不对上）,div下面的同级的所有span

毗邻选择器(+) （对下不对上），div下面的第一个span

属性选择器

分组与嵌套

分组

嵌套

伪类选择器

伪元素选择器

选择器的优先级

文字字体

font-family

字体大小（font-size）

字重（粗细）

font-weight

文本颜色

文字对齐

text-align

文字装饰

text-decoration

首行缩进 （text-indent）

背景属性 （background）

边框属性

边框（border）

画圆

display 属性

首行缩进（text-indent）

背景属性（background）