一、css简介

　　CSS 是 Cascading Style Sheets的缩写，称为层叠样式表，用来设计网页的样式布局，以及大小来适应不同的屏幕等，使网页的样式和网页数据分离，

二、导入css

导入css有3种方式：

1.元素内嵌

     行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。 <div style="background:red"></div>

2.页面嵌入

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

         <head>

         　　<style>

               　　div {
                      background-color: red !important; # 如果有!important则会无论如何都会运用上这个css  
                   }

        　　</style>

        </head>

3.外部引用

     也是将一个.css文件引入到HTML文件中<link rel="stylesheet"href="mystyle.css" />

注意：

     导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，

闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，

因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。此外行内的样式等级最高

三、css选择器(常用)

标签选择器：

    div { background-color:red; }

    <div > </div>

class选择器：

    .bd { background-color:red; }

    <div class='bd'> </div>

id选择器：

    #idselect { background-color:red; }

    <div id='idselect' > </div>

关联选择器：

    #idselect p{ background-color:red; }

    <div id='idselect' > <p> </p> </div>

组合选择器：

    input,div,p{ background-color:red; } 

属性选择器：

    input[type='text']{ width:100px; height:200px; }

    .c1[xiao='a']{color:red;}
    <div class='c1' xiao='a'>自定义属性选择器</div>    

伪元素选择器：

    a:link{background-color:red;}    # 鼠标没有碰过的样式

    a:hover{background-color:red;}   # 鼠标放上去的样式

    a:active{background-color:red;}  # 选择链接时的样式

    a:visited{background-color:red;} # 已经访问过的链接的样式

更多选择器　　

四、css常用的属性　

1 颜色属性：

color：green

color：#ff6600

color：#f60

color：rgb(255,255,255)      # 红(R)、绿(G)、蓝(B) 每个的取值范围0~255

color：rgba(255,255,255,1)   # RGBA是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha的(色彩空间)透明度

2 字体属性：　　

font-size:14px/50%/larger

font-family:微软雅黑,serif

font-weight:normal(默认值)/bold(粗)/bolder(更粗)/lighter(更细)

                   100、200、300~900,400 = normal，而 700 = bold

简写方式:
    font: 20px  '微软雅黑'

3 背景属性：　　

background-image:url(图片路径)

background-repeat:no-repeat(不重复)/repeat(重复平铺满)/repeat-x(向Y轴重复)/repeat-y(向Y轴重复)

background-position: right top(20px 20px);(横向：left center right)(纵向：top center bottom)

简写方式:

    background:背景颜色 url(图像) 重复 位置

    background:#f60 url(images/bg,jpg) no-repeat top center

4 文本属性：　　

text-align: center;   # 横向排列

line-height: 200px;   # 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比

text-indent: 150px;   # 首行缩进，

letter-spacing: 10px; # 字符间距

word-spacing: 20px;   # 单词间距

5 边框属性：

border-style: none   # 无边框

              solid  # 直线边框

              dashed # 虚线边框

              dotted # 点状边框

              double # 双线边框

              inherit # 继承

              groove # 凸槽边框

              ridge  # 垄状边框、inset inset边框、outset outset边框 依赖于border-color属性

border-width：px  固定值的边框

             medium 中等边框

             thick 粗边框

             thin 细边框

             inherit继承        

border-color：red

              #ff0000

              rgb(255,255,0)

              rgba(255,255,0,0.1)


border-radius: px 倒角

简写方式：

      border：2px #f60 solid

6 列表属性：　

list-style-type:none	无标记。

                disc	默认。标记是实心圆。

                circle	标记是空心圆。

                square	标记是实心方块。

                decimal	标记是数字。

                decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)

                lower-roman  	小写罗马数字(i, ii, iii, iv, v, 等。)

                upper-roman	大写罗马数字(I, II, III, IV, V, 等。)

                lower-alpha 	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)

                upper-alpha 	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)

                lower-greek	 小写希腊字母(alpha, beta, gamma, 等。)

                lower-latin	小写拉丁字母(a, b, c, d, e, 等。)

                upper-latin	大写拉丁字母(A, B, C, D, E, 等。)

                hebrew	  传统的希伯来编号方式

                armenian	传统的亚美尼亚编号方式

                georgian	传统的乔治亚编号方式(an, ban, gan, 等。)

                cjk-ideographic	简单的表意数字

                hiragana	标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）

                katakana	标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）

                hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）

                katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

list-style-position:inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。

                    outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

                    inherit	规定应该从父元素继承 list-style-position 属性的值。

list-style-image:URL	   图像的路径。

                 none	   默认。无图形被显示。

                 inherit   规定应该从父元素继承 list-style-image 属性的值。

简写方式:

      list-style:square inside url('/i/arrow.jpg');

7 dispaly属性：　　

display:none    # 隐藏属性

        block   # 变块级元素

        inline  # 变内联元素

        inline-block # 内联元素默认不能设置长宽，块级可以，这个让内联元素可以设置height width

8 cursor属性：

cursor:pointer  # 鼠标变小手

       help

       move

9 opacity属性：

opacity：0.4  # 0-1之间的小数，颜色透明度

10 z-index属性：　　

z-index：10  # 设置优先级，一般用在模态对话框

11 margin,pading边距属性：

margin: 10px    # 外边距(本身不会增加)，与边框的距离

padding: 10px   # 内边距(本身会增加) 遵循上右下左，元素之间的距离

12 float属性　　

float:left/right

clear:both

<body>

    <div style="width: 500px;border:2px solid red;">

        <div style="width:20%;float: left;background-color: aqua;">a</div>

        <div style="width:80%;float: left;background-color: beige;">b</div>

        <div style="clear:both"></div>

    </div>

</body>

13 position属性

position: fixed      # 固定浏览器窗口，网页返回顶部的按钮

          absolute   # 固定窗口

          relative   # 一般用于和absolute配合使用，相对于absolute

    <div style="height:2000px;">

        <div style="position: fixed;bottom: 0px;right: 0px;background-color: red;">111111</div>

    </div>

    <div style="height: 500px;width: 400px;border: 2px solid red;position: relative;">

        <div style="height: 200px;background-color: red;">

            <div style="position:absolute;bottom: 0px;right: 0px;">111</div>

        </div>

    </div>

更多属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>模态对话框</title>

    <style>

        .hide {

            display: none;

        }

        .modal{

            width:400px;

            height:300px;

            background-color: #dddddd;

            position: fixed;

            top:50%;

            left:50%;

            margin-top:-150px;

            margin-left:-200px;

            z-index: 10;

        }

        .shadow {

            position: fixed;

            top:0px;

            left:0px;

            right:0px;

            bottom:0px;

            /*background-color: black;*/

            /*opacity: 0.6;*/

            background-color: rgba(0,0,0,.6);

            z-index: 9;

        }

    </style>

</head>

<body>

    <input type="button" value="添加"/>

    <div class="shadow"></div>

    <div class="modal">

        <input type="text"/>

        <input type="text"/>

        <input type="text"/>

        <input type="text"/>

    </div>

    <div style="height: 2000px;"></div>

</body>

</html>

模态对话框

注意：

1、css文档从上到下执行，以最后一个为准

a {

    font-size: 10px;

}

b {

    font-size: 40px;

}

<p class = "a b"> ddd </p>

2、有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt 切记

3、父div里面的子div都float,

　　方法1、在最后加一个div然后添上属性 clear：both　

　　方法2、定义一个通用属性，

clearfix:afte{

    content: '111';

    display: block;

    clear: both;

    /* visibility 隐藏内容但占高度*/

    visibility: hidden;

    height: 0;

    /*display: none;隐藏内容也不占高度*/

}

一些案例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>带图像的登录</title>

    <style>

        .icon-name{

            background-image: url(i_name.jpg);

            height:16px;

            width:200px;

            display: inline-block;

            background-repeat:no-repeat;

        }

    </style>

</head>

<body>

    <div style="width:200px;position: relative;">

        <input style="width:180px;padding-right: 20px;" type="text"/>

        <span class="icon-name" style="position: absolute;top:5px;right: -186px;"></span>

    </div>

</body>

</html>

带图像input

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>伪类选择器运用清除浮动</title>

    <style>

        .c1:after {

            content:'aaa';

        }

        .c2:before {

            content:'666';

        }

        .clearfix:after{

            content:'.';

            clear:both;

            display: block;

            visibility: hidden;

            height:0;

        }

        .left{

            float:left;

        }

    </style>

</head>

<body>

    <div class="c1">ddd</div>

    <div class="c2">888</div>

    <div style="background-color: red;" class="clearfix">

        <div class="left" style="height:100px;background-color: green">1</div>

        <div class="left">2</div>

    </div>

</body>

</html>

伪类选择器运用清除浮动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>小尖角</title>

    <style>

        .icon {

            display: inline-block;

            border-top:15px solid red;

            /*border-right:15px solid green;*/

            /*border-bottom:15px solid yellow;*/

            /*border-left:15px solid pink;*/

            border-right:15px solid transparent;

            border-bottom:15px solid transparent;

            border-left:15px solid transparent;

        }

    </style>

</head>

<body>

    <div class="icon"></div>

</body>

</html>

小尖角

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>后台布局一</title>

    <style>

        * {

            margin:0;

        }

        .pg-header {

            height:48px;

            background-color: #2459a2;

        }

        .pg-body .body-menu{

            position: absolute;

            top:48px;

            left:0;

            bottom:0;

            width:200px;

            background:red;

        }

        .pg-body .body-content{

            position: absolute;

            top:48px;

            left:210px;

            /*bottom:0;*/

            right:0;

            background:green;

        }

    </style>

</head>

<body>

    <div class="pg-header"></div>

    <div class="pg-body">

        <div class="body-menu"></div>

        <div class="body-content">

            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>

            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>

            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>

            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>

            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>

            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>

            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>

            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>

            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>

            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>

            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>

        </div>

    </div>

    <div class="pg-heaher"></div>

</body>

</html>

后台布局一

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>后台布局二</title>

    <style>

        * {

            margin:0;

        }

        .pg-header {

            height:48px;

            background-color: #2459a2;

        }

        .pg-body .body-menu{

            position: absolute;

            top:48px;

            left:0;

            bottom:0;

            width:200px;

            background:red;

        }

        .pg-body .body-content{

            position: absolute;

            top:48px;

            left:210px;

            bottom:0;

            right:0;

            background:green;

            overflow: auto;

        }

    </style>

</head>

<body>

    <div class="pg-header"></div>

    <div class="pg-body">

        <div class="body-menu"></div>

        <div class="body-content">

            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>

            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>

            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>

            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>

            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>

            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>

            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>

            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>

            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>

            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>

            asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>

        </div>

    </div>

    <div class="pg-heaher"></div>

</body>

</html>

后台布局二

Python自动化运维之21、CSS的更多相关文章

【目录】Python自动化运维
目录:Python自动化运维笔记 Python自动化运维 - day2 - 数据类型 Python自动化运维 - day3 - 函数part1 Python自动化运维 - day4 - 函数Part2 ...
python自动化运维篇
1-1 Python运维-课程简介及基础 1-2 Python运维-自动化运维脚本编写 2-1 Python自动化运维-Ansible教程-Ansible介绍 2-2 Python自动化运维-Ansi ...
Python自动化运维：技术与最佳实践 PDF高清完整版|网盘下载内附地址提取码|
内容简介: <Python自动化运维:技术与最佳实践>一书在中国运维领域将有“划时代”的重要意义:一方面,这是国内第一本从纵.深和实践角度探讨Python在运维领域应用的著作:一方面本书的 ...
Day1 老男孩python自动化运维课程学习笔记
2017年1月7日老男孩python自动化运维课程正式开课第一天学习内容: 上午 1.python语言的基本介绍 python语言是一门解释型的语言,与1989年的圣诞节期间,吉多·范罗苏姆为了在阿 ...
python自动化运维学习第一天--day1
学习python自动化运维第一天自己总结的作业所使用到知识:json模块,用于数据转化sys.exit 用于中断循环退出程序字符串格式化.format字典.文件打开读写with open(file, ...
Python自动化运维的职业发展道路（暂定）
Python职业发展之路 Python自动化运维工程 Python基础 Linux Shell Fabric Ansible Playbook Zabbix Saltstack Puppet Dock ...
Python自动化运维技术与最佳实践PDF高清完整版免费下载|百度云盘|Python基础教程免费电子书
点击获取提取码:7bl4 一.内容简介 <python自动化运维:技术与最佳实践>一书在中国运维领域将有"划时代"的重要意义:一方面,这是国内第一本从纵.深和实践角度探 ...
python自动化运维之CMDB篇-大米哥
python自动化运维之CMDB篇视频地址:复制这段内容后打开百度网盘手机App,操作更方便哦链接:https://pan.baidu.com/s/1Oj_sglTi2P1CMjfMkYKwCQ ...
python自动化运维之路~DAY5
python自动化运维之路~DAY5 作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.模块的分类模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数 ...

随机推荐

Mobile Computing-天平难题-Uva1354(回溯枚举二叉树)
原题:https://uva.onlinejudge.org/external/13/1354.pdf 有s块石头,每块都被一根绳子吊着,如果有两个及以上的石头,需要平衡的天平把所有的石头挂起来. 房 ...
Apache-Tika解析Word文档
通常在使用爬虫时,爬取到网上的文章都是各式各样的格式处理起来比较麻烦,这里我们使用Apache-Tika来处理Word格式的文章,如下: package com.mengyao.tika.app; i ...
Python中 os._exit() sys.exit() exit()区别
Python退出程序的方式有两种:os._exit(), sys.exit() 1)os._exit() 直接退出 Python程序,其后的代码也不会继续执行. 2)sys.exit() 引发一个 S ...
lucene4.0与之前版本的一些改变
最近在用lucene4.0,因为之前也没用过lucene其它版本,所以也不是很熟悉.但每次上网查资料代码的时候,总发现网友们贴的代码都是之前的版本的.当我拷贝过来的时候总会出问题,去查API的时候,总 ...
【剑指offer】二叉树中和为某一值的路径
转载请注明出处:http://blog.csdn.net/ns_code/article/details/26141815 题目描写叙述: 输入一颗二叉树和一个整数,打印出二叉树中结点值的和为输入整数 ...
ExtJS学习-----------Ext.String，ExtJS对javascript中的String的扩展
关于ExtJS对javascript中的String的扩展,能够參考其帮助文档,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 以 ...
[javascirpt] Regex
To Currency function toCurrency(price){ return price.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, & ...
Spring 3 + Quartz 1.8.6 Scheduler Example--reference
In this tutorial, we will show you how to integrate Spring with Quartz scheduler framework. Spring c ...
composer 说明<转>
转自 http://blog.csdn.net/zzulp/article/details/18981029 Composer是一个基于项目的依赖管理器,负责将PHP项目所依赖的包或库安装到项目所在 ...
循序渐近学docker---笔记
1.安装docker 环境:ubuntu 16.04 sudo apt-get install docker.io root@ld-Lenovo-G470:~# docker -vDocker ver ...

Python自动化运维之21、CSS

一、css简介

二、导入css

三、css选择器(常用)

四、css常用的属性

注意：

Python自动化运维之21、CSS的更多相关文章

随机推荐

热门专题

四、css常用的属性　