CSS知识概况

乐想屋

于 2018-01-07 00:00:00 发布

阅读量542

点赞数

本文链接：https://blog.csdn.net/PbGc396Dwxjb77F2je/article/details/79001524

版权

1、什么是CSS

层叠样式表（cascading style sheets），用来定义如何显示HTML元素。

有三种方法在HTML中使用CSS样式：

内联样式表：CSS代码写在现有的HTML标签中，直接使用style属性改变样式。
案例1：内联式设置
```
<body>
<div style="background-color:red;color:white;">内容</div>
</body>
```

嵌入式样式表：CSS样式代码写在<style type="text/css"></style>标签之间，表示可以文档通用，一般情况下CSS写在<head></head>之间。

案例2：嵌入式设置

<head>
<meta charset="UTF-8"/>    <!--设置编码格式-->
    <style>
        div{
                background-color:red;
                color:white;
              }
</style> <!--设置在这里表示当前页面都适用-->
</head>

外部样式表：CSS代码写在一个单独的外部文件里面，这个CSS样式文件以“.CSS“为扩展名，在<head>内使用<link>标记来将css样式文件链接到HTML文件。
案例3：外部样式表

<head>
<meta charset="UTF-8"/>    <!--设置编码格式-->
    <link rel="stylesheet" href="common.css"/><!--外部文件-->
</head>

因为head优先级高于body，如果是相同的属性，可以使用嵌入式，如果是特殊要求的，可以使用内联式。

2、CSS选择器：

选择器通常是需要改变样式的HTML元素，每条声明由一个属性和一个值组成。包含以下几种类型：

标签选择器，比如div，找到所有的div标签，然后赋值样式，也可以用p、dr等
ID选择器，以#开始，后加名称，如"#i1"，ID标签不能重复
class选择器，以点开始，后加名称，如“.c1”
多级选择器，以.class名称+空格+标签+空格...+.+子class名称
案例4：选择器

<html lang="en">
<head>
<meta charset="UTF-8"/>    <!--设置编码格式-->
    <style>
        /*标签选择器*/
        div{
                color:red;
              }
        /*ID选择器*/
        #i1{
                font-size:56px;
                color:green;
              }
        /*class选择器*/
        .c1{
                background-color:yellow;
              }
         /*多级选择器，可以使用--.c2 div p a--*/
        .c1 div p .c2{
               background-color:green;
        }
</style> <!--设置在这里表示当前页面都适用-->
</head>
<body>
<div>内容</div><!--对应div标签选择器-->
    <a id="i1">id选择器</a><!--对应id选择器-->
    <br/>
<!--class选择器-->
    <span class="c1">class选择器1</span>
<div class="c1">class选择器2</div>
<a class="c1">class选择器3</a>
<!--多级选择器-->
    <div class="c1">
<div>
<p>
<span>oo</span>
<br/>
<a class="c2">多级标签</a>
</p>
</div>
</div>
</body>
</html>

效果：

0?wx_fmt=png

属性选择器，跟随class，.class[属性名='属性值']；选取class选择器下的属性
案例5：属性选择器

<html lang="en">
<head>
<meta charset="UTF-8"/>    <!--设置编码格式-->
    <style>
         .sp[qita='a']{
                    color:red;
        }
</style>
</head>
<body>
<div>
<div class="sp" qita="a">1</div>
<div class="sp" qita="b">2</div>
<div class="sp">3</div>
<div class="sp" qita="a">4</div>
</div>
</body>
</html>

效果：

0?wx_fmt=png

3、CSS的属性值：

4-1 颜色属性color来定义文本：

颜色名称，如color:green
十六进制，如color:#ff6600
简写方式，如color:#f60
RGB方式，如rgb(255,255,255)，
RGBA方式，如color:rgba(255,255,255,1)

4-2 字体属性

字体大小：font-size：14px
字体：font-family：微软雅黑，serif
字体加粗，font-weight，定义字体加粗，可以使用名称，如normal、bold（粗）、bolder（更粗）、lighter（更细）,还可以使用数字，700=bold

4-3 背景属性

主要包括背景颜色、背景图片、背景重复、背景位置。

背景颜色：background-color用来定义背景的颜色
背景图片：background-image，none表示不适用
背景重复：background-repeat，no-repeat，repeat-x在x轴上重复，repeat-y在y轴上重复。
背景位置：background-position。横向为left、right、center；纵向top、center、bottom；

4-4 文本属性

可以用文本属性设置行高、缩进和字符间距，

text-align 设置文本对齐方式，属性值可以取left、center、right
line-height 设置文本行高，属性值可以是具体的数值
text-indent 代表首行缩进
letter-spacing设置字符间距，比如letter-spacing：3px；

4-5：边距：

(Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式：

0?wx_fmt=png

案例6：边框，去空格

<html lang="en">
<head>
<meta charset="UTF-8"/>    <!--设置编码格式-->
</head>
<body>
<div style="height:100px;background-color:#ddd;boder:1d solid red;">
<div style="margin-top:30px;margin-left:100px;padding-top:10px;">
<input/>
<input/>
</div>
</div>
</body>
</html>

效果：

0?wx_fmt=png

4-6 position 属性

CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

static元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
fixed：按窗口固定，比如网页的头部图片固定
absolute：找上级position，会根据块级框定位，滚动时会移动
relative：单独的是没有作用的，需要和absolute结合使用，absolute相对于relative去定位
案例7：位置

<html lang="en">
<head>
<meta charset="UTF-8"/>    <!--设置编码格式-->
</head>
<body>
<!--fixed按窗口绝对定位-->
    <div style="height:100px;background-color:green;">其他</div>
<div style="position:fixed;top:20px;right:500px">返回底部</div>
<!--relative相对于块定位，滚动不会移动-->
    <div style="height:300px;width:200px;border:1px solid red;position:relative">
<!--absolute相对于块定位，滚动会移动-->
          <div style="position:absolute;right:0;bottom:0">返回顶部</div>
</div>
<!--relative相对于块定位，滚动不会移动--->
    <div style="position:relative;left:500px;bottom:200px;">返回中部</div>
</body>
</html>

0?wx_fmt=png

4-7 漂浮属性

案例8：漂浮，一列显示

<head>
<meta charset="UTF-8"/>    <!--设置编码格式-->
</head>
<body>
<div style="width:500px;">
<div style="width:20%;background-color:rgb(255,0,0);">aa</div>
<div style="width:80%;background-color:rgb(44,44,44);">bb</div>
<div style="width:20%;background-color:rgb(0,255,0);float:left">aa</div>
<div style="width:80%;background-color:rgb(155,55,55);float:left">bb</div>
</div>
</body>
</html>

效果： 0?wx_fmt=png

4-8 display属性

display:block

block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。

display:inline

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block

将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

4-9 其他案例：

案例9：小尖角的实现，主要是transparent的应用

<html lang="en">
<head>
<meta charset="UTF-8"/>    <!--设置编码格式-->
    <!--设置小尖角-->
    <style>
        .icon{
            display:inline-block;
            border-top:15px solid green;
            border-bottom:15px solid red;
            border-left:15px solid transparent;
            border-right:15px solid transparent;
        }
</style>
</head>
<body>
<div class="icon"></div>
</body>
</html>

效果：

0?wx_fmt=png

案例10：关于布局的实现，上侧固定标题栏，左侧目录栏，右侧内容栏

<html lang="en">
<head>
<meta charset="UTF-8"/>    <!--设置编码格式-->

    <style>
        /*去body空格*/
        body{
            margin:0;
            }
         /*header格式*/
        .pg-header{
            height:48px;
            background-color:rgb(22,121,81);
        }
         /*body左边栏目*/
        .pg-body .body-menu{
            position:absolute;
            top:48px;
            left:0;
            bottom:0;
            width:200px;
            background-color:rgb(140,199,159);
        }
         /*内容栏目*/
         .pg-body .body-content{
            position:absolute;
            top:48px;
            left:210px;
            right:0;
            bottom:0;
            background-color:rgb(76,172,199);
            overflow:auto;/*如果超出内容则自动添加滚动条*/
        }
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-body">
<div class="body-menu"></div>
<div class="body-content"></div>
</div>
<div class="pg-footer"></div>
</body>
</html>

效果： 0?wx_fmt=png

案例11：z-index类图层作用

<html lang="en">
<head>
<meta charset="UTF-8"/>    <!--设置编码格式-->
    <style>
        .model{
            width:500px;
            height:300px;
            background-color:green;
            position:fixed;
            top:50%;
            left:50%;
            margin-left:-250px;
            margin-top:-150px;
            z-index:10;
        }
        .shadow{
            position:fixed;
            left:0;
            right:0;
            bottom:0;
            top:0;
            background-color:black;
            opacity:0.4;
            z-index:9;
        }
</style>
</head>
<body>
<input type="button" value="添加"/>
<div class="shadow"></div>
<div class="model">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</body>
</html>

0?wx_fmt=png

css学习参考：http://www.w3school.com.cn/css/css_list.asp

图标插件：http://fontawesome.io/

程序案例链接：https://pan.baidu.com/s/1ge63Kor 密码：x2my

乐想屋

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS知识概况

1、什么是CSS 层叠样式表（cascading style sheets），用来定义如何显示HTML元素。有三种方法在HTML中使用CSS样式：内联样式表：CSS代码写在现有的HTML标签中，直接使用style属性改变样式。案例1：内联式设置body> div style="background-color:red;color:white;">内容div>body>嵌入式样式
复制链接

扫一扫