首页 > > 网页制作 > css >

Web前端学习——CSS

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

一、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前端工程师入门须知

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签