Web前端学习——CSS

2018-06-24 02:04:26来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

一、CSS简介
CSS全称cascading style sheeding,层叠样式列表。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
二、CSS组成
1、选择器
(1)标签选择器

<head>
    <style>
        p{
            background-color: green;
            height: 48px;
            }
    </style>
</head>
<body>
    <p>中国人</p>
</body>

(2)ID选择器

<head>
    <style>
        #i1{
            background-color: blue;
            height: 48px;
            }
    </style>
</head>
<body>
    <div id="i1">
        中国人
    </div>
</body>

(3)class选择器

<head>
    <style>
        .c1{
            background-color: yellow;
            height: 48px;
            }
    </style>
</head>
<body>
    <div class="c1">
        中国人
    </div>
</body>

(4)关联选择器(层级选择器,空格)
类似span标签里的p标签的样式,也可以是id,class,标签等组合

<head>
    <style>
        span p{
            background-color: darkorchid;
            height: 48px;
            }
    </style>
</head>
<body>
    <p>中国人</p>
    <span>
        <p>中国人</p>
    </span>
    <p>中国人</p>
</body>

(5)组合选择器(逗号)

<head>
    <style>
        .c1,.c2,.c3{
            background-color: yellow;
            height: 48px;
            }
    </style>
</head>
<body>
    <div class="c1">
        中国人
    </div>
    <div class="c2">
        中国人
    </div>
        <div class="c3">
        中国人
    </div>
</body>

(6)属性选择器
对选择的标签过滤后再通过属性进行过滤

<head>
    <style>
        .cc[n="tom"]{
            background-color: yellow;
            height: 48px;
            }
    </style>
</head>
<body>
    <div class="cc">
        中国人
    </div>
    <div class="cc" n="tom">
        中国人
    </div>
</body>

(7)行选择器

<body>
    <div style=" height: 28px;">
        中国人
    </div>
</body>

2、link引入外部css
通过建立专属的css文件,在其他html导入css文件,从而使用css文件的样式
001.css内容如下:

#i1{
            background-color: blue;
            height: 48px;
            }
.c1{
            background-color: yellow;
            height: 48px;
            }
p{
            background-color: green;
            height: 48px;
            }
span p{
            background-color: darkorchid;
            height: 48px;
            }
.cc[n="tom"]{
            background-color: yellow;
            height: 48px;
            }

001.html内容如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="001.css">
</head>
<body>
    <p>中国人</p>
</body>
</html>

3、优先级
row style——>head style (按照编写顺序,自上而下优先)——> external style
4、css注释
/* 注释内容 */
5、背景、边框
样式、宽度、颜色、上下左右

<div style="border: 2px solid red ;width: 100px ;height: 20px">
    中国人
</div>

##下面为边框属性
    border-top-color: red;
    border-top-style: solid;
    border-top-width: 2px;
    border-right-color: red;
    border-right-style: solid;
    border-right-width: 2px;
    border-bottom-color: red;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-left-color: red;
    border-left-style: solid;
    border-left-width: 2px;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;

background可以定义如下属性:
    background-color 规定要使用的背景颜色;
    background-image 规定要使用的背景图像;
    background-repeat 规定如何重复背景图像;
    background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动;
    background-position 指定背景图像的位置;

<div style="background-image: url(001.jpg);border: 3px;height: 800px;"> 
    chinese
</div>

6、float
漂移,挨着站齐

<div style="border: 2px solid red ;width: 100px ;height: 20px;float: left">
    中国人
</div>
<div style="border: 2px solid red ;width: 100px ;height: 20px;float: left;">
    中国人
</div>

7、display
块、行标签转换,inline、block、inline-block、none
行内标签:无法设置高度、宽度、padding、margin
块级标签:设置高度、宽度、padding、margin

<body>
    <span style="display: block">123</span>
    <div style="display: inline">456</div>
</body>

8、padding margin

 

9、position

固定位置,做层叠,其中主要有
fixed:固定在页面某个位置
relative+absolute:
top/bottom/left/right/
opacity:0-1透明度
z-index:层叠优先级,值越大越靠上

<body>
    <div  style="height: 30px;width: 100%;;background-color: blueviolet;position: fixed;top: 0">
        菜单栏
    </div>
    <div onclick="gotop()" style="height: 30px;width: 80px;background-color: blueviolet;position: fixed;right: 0;bottom: 0">
        返回顶部
    </div>
    <div style="height:5000px;background-color: blanchedalmond ;margin-top: 30px">

    </div>
    <script>
        function gotop() {
            document.body.scrollTop=0;
        }
    </script>
</body>

11、overflow
auto:超出,出现滚动条
hidden:超出部分隐藏
<body>
<div style="background-color: red ;width: 220px;height: 220px ;overflow: hidden">
    <img src="001.jpg">

</div>
<div style="background-color: blue ;width: 220px;height: 220px ;overflow: auto">
    <img src="001.jpg">
</div>
</body>

10、overflow

auto:超出,出现滚动条
hidden:超出部分隐藏

<body>
<div style="background-color: red ;width: 220px;height: 220px ;overflow: hidden">
    <img src="001.jpg">

</div>
<div style="background-color: blue ;width: 220px;height: 220px ;overflow: auto">
    <img src="001.jpg">
</div>
</body>

11、hover

鼠标移动到相应位置,显示其stype
12、其他常用style属性
width: 100px ;                         ##可以使用89%,边框宽度
height: 20px ;                         ##可以使用89%,边框高度
font-size:19px;                     ##字体大小
font-weight:bold ;                    ##加粗,80px,normal
font-family:'Microsoft YaHei';        ##字体样式,
color:red;                            ##字体颜色
text-align:center;                     ##水平方向字体对齐方式,center/left/right
line-height:48px;                    ##根据div,垂直方向字体居中
background-color:red                ##背景色
text-decoration                        ##字体装饰

 

<a href="http://www.baidu.com" style="text-decoration: none">百度</a>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:利用vertical-align:middle垂直居中

下一篇:web前端工程师入门须知