1.CSS属性

　基本属性

    height，                 高度 百分比

    width，                  宽度 像素，百分比

    text-align:ceter,     水平方向居中

    line-height，          垂直方向根据标签高度

    color、                   字体颜色

    font-size、            字体大小

    font-weight          字体加粗

    <div style="

        height:48px;

        width: %;

        border: 2px solid black;

        font-size: 20px;

        text-align: center;

        line-height: 48px;

        ">

        NNNN

    </div>

　背景属性 background

　　　　属性介绍

background-color
background-image
background-repeat
background-position

<body>

    <div style="height: 100px"></div>

    <div style="background-image: url(2.png);

    background-repeat:no-repeat;

    border: 1px solid red;

    background-position-x:1px;

    background-position-y:-110px;

    height: 20px;

    width: 20px;

    "></div>

　边框属性border

　　属性介绍

border-width
border-style (required)
border-color

<div style="border: 1px solid red;"> ssss</div>

2.dispaly属性

display: none; 　　让标签消失
display: inline; 块级标签--->行内
display: block; 行内标签--->块级
display: inline-block; 具有行内，块级属性

　　行内标签：无法设置高度，宽度，padding margin 默认自己有多少占多少

　　块级标签：设置高度，宽度，padding margin

    <body>

        <div style="display: inline;">ssss</div>

        <span style="display: block;">nnnn</span>

    </body>

    <span style="display: inline-block;height: 50px;width: 70px">ALEx</span>

    <a style="">Eric</a>

4.内边距(padding)和外边距(margine)

　　盒子模型

margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding: 用于控制内容与边框之间的距离；
Border(边框): 围绕在内边距和内容外的边框。
Content(内容): 盒子的内容，显示文本和图像。

   <body>

        <div style="border: 1px solid red;height: 70px;">

            <div style="height: 50px;padding-top: 20px">sss</div>

        </div><br/>

        <div style="border: 1px solid red;height: 70px;">

            <div style="height: 50px;margin-top: 20px">sss</div>

        </div>

    </body>

　　居中应用 <body style="margin: 0 auto">

5.float属性

常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等

    <div style="width:20%;background-color: red;"></div>

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

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

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

   <div>

        <div style="width: 300px;border: 1px solid red">

            <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>

            <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>

            <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>

            <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>

            <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>

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

        </div>

    </div>

　　2.overflow: hidden,auto

<body>

    <div style="height: 200px;width:400px;overflow: auto">

        <img src="1.jpg"/>

    </div>

    <div style="height: 200px;width:400px;overflow: hidden">

        <img src="1.jpg"/>

    </div>

</body>

6.position(定位)

　　1. static

　　　　static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

　　2. position:fixed

　　　　在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

<body>

    <div onclick="GoTop();" style="width:50px;height: 50px;background-color: black;color: white;

    position: fixed;

    bottom: 20px;

    right: 20px;

    ">返回顶部</div>

    <div style="height: 5000px;background-color: #dddddd">ssss</div>

    <script>

        function GoTop(){

            document.body.scrollTop = ;

        }

    </script>

</body>

　　3. position: relative／absolute

<head>

    <style>

        .pg-header{

            height:48px;

            background-color: black;

            color: #dddddd;

            position: fixed;

            top:;

            right:;

            left:;

        }

        .pg-body{

            background-color: #dddddd;

            height:5000px;

            margin-top: 50px;

        }

    </style>

</head>

<body>

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

    <div class="pg-body">内容</div>

</body>

<body>

    <div style="position:relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">

        <div style="position:absolute;left: 0;bottom: 0;width:50px;height: 50px;background-color: black;"></div>

    </div>

    <div style="position:relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">

        <div style="position:absolute;right: 0;bottom: 0;width:50px;height: 50px;background-color: black;"></div>

    </div>

    <div style="position:relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">

        <div style="position:absolute;right: 0;top: 0;width:50px;height: 50px;background-color: black;"></div>

    </div>

</body>

　　4.opcity: 0.5 透明度

　　5. z-index:10 层级顺序

<body>

    <div style=" display:none;z-index: 10;position:fixed;top: 50%;left: 50%;

    margin-left: -200px;margin-top: -250px;

    height: 500px;width: 400px;

    background-color: white">

        <input type="text"/><br/>

        <input type="text"/><br/>

        <input type="text"/>

    </div>

    <div style="display:none;z-index: 9;position: fixed;background-color: black;

    top:;

    bottom: ;

    right: ;

    left: ;

    opacity: 0.5;

    "></div>

    <div style="height: 5000px;background-color: #dddddd">ssss</div>

</body>

7.hover 鼠标效果

　　　　/*当鼠标移动到当前标签上时，以下css属性才生效*/

        a:link（没有接触过的链接）,用于定义了链接的常规状态。

        a:hover（鼠标放在链接上的状态）,用于产生视觉效果。

        a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。

        a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。

        伪类选择器 : 伪类指的是标签的不同状态:

                   a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态

        a:link {color: #FF0000} /* 未访问的链接 */

        a:visited {color: #00FF00} /* 已访问的链接 */

        a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

        a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

<head>

    <style>

        .pg-header{

            position: fixed;

            right: ;

            left: ;

            top: ;

            height: 48px;

            background: #2459a2;

            line-height: 48px;

        }

        .pg-body{

            margin-top: 50px;

        }

        .w{

            width: 980px;

            margin:  auto;

        }

        .pg-header .menu{

            display: inline-block;

            padding:  10px  10px;

            color: white;

        }

        /*当鼠标移动到当前标签上时，以下css属性才生效*/

        .pg-header .menu:hover{

            background-color: blue;

        }

    </style>

</head>

<body>

    <div class="pg-header">

        <div class="w">

            <a class="logo">LOGO</a>

            <a class="menu">全部</a>

            <a class="menu">42区</a>

            <a class="menu"></a>

        </div>

    </div>

    <div class="pg-body">

        <div class="w">a</div>

    </div>

</body>

8.CSS练习

<body>

    <div style="height: 35px;width: 400px;position: relative">

        <input type="text" style="height: 35px;width: 400px;padding-right: 30px"/>

        <span style="position:absolute;right:-24px;top: 10px;

        background-image:url(i_name.jpg);

        height: 16px;width: 16px;display: inline-block"></span>

    </div>

</body>

day4 CSS属性操作的更多相关文章

CSS属性操作/下
CSS属性操作/下 1.伪类 anchor伪类跟<a>/</a>有关:专用于控制链接的显示效果 a:link(没有接触过的链接),用于定义了链接的常规状态. a:hover( ...
CSS属性操作
CSS属性操作 1 属性选择器 Elenment(元素) E[att] 匹配所有具有att属性的E元素,不考虑它的值.(注意:E在此处可以省略)(推荐使用) 例如:[po]{ font-size: 5 ...
前端基础：CSS属性操作
CSS属性操作 1.文本文本颜色:color,颜色属性被用来设置文字的颜色,颜色是通过CSS经常指定的,其格式有: 1.十六进制:#FF0000: 2.RGB值:RGB(255,0,0): 3.颜色 ...
前端基础-CSS属性操作
前端基础-CSS属性操作 css text 文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB( ...
CSS属性操作一
CSS属性操作一.CSS text 1.文本颜色:color 颜色属性被用来设置文字的颜色.颜色是通过CSS最经常的指定: • 十六进制值 - 如: #FF0000 • 一个RGB值 - 如: RG ...
52、css属性操作
前面说的主要是css的使用规则和选择器等,这篇主要讲解css的具体使用. 一.css text 1.文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 1)十六进制值 ...
4、css属性操作
前面说的主要是css的使用规则和选择器等,这篇主要讲解css的具体使用. 本篇导航: css text 背景属性边框属性列表属性 dispaly属性外边距(margine)和内边距(paddin ...
前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作
一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式行内式是在标 ...
CSS属性操作二
9.float属性基本浮动规则先来了解一下block元素和inline元素在文档流中的排列方式. block元素通常被现实为独立的一块,独占一行,多个block元素会各自新起一行,默认block元 ...

随机推荐

POJ-3662 Telephone Lines---二分+最短路+最小化第k+1大
题目链接: https://cn.vjudge.net/problem/POJ-3662 题目大意: 求一条路径从1到n使第k+1大的边最小. 解题思路: 二分答案mid,当原边权小于等于mid新边权 ...
MVC渲染文章内容的html标签转义
文章详情页一般从数据库中取出文章内容,文章内容一般含有等html标签,MVC中如果直接从模型输出文章内容,会把html标签转义变成<&gt等,这时候是要把转义后的标签变成html标签, ...
selenium + python自动化测试unittest框架学习（七）随机生成姓名
在自动化测试过程中经常要测试到添加用户的操作,每次都要输入中文,原本是找了十几个中文写成了列表,然后从列表中随机取出填入用户名文本框中,随着测试的增加,发现同名的人搜索出来一大堆,最后在网上找了个随机 ...
elk6.*版本搭建连接比较好一点的
https://www.cnblogs.com/harvey2017/p/8922164.html
使用navigator.userAgent来进行浏览器嗅探
/*--------------------------------------------------------------------------------* * 功能描述:使用navigat ...
TS流基本概念
在MPEG-2标准中,有两种不同类型的码流输出到信道:一种是节目码流(Program Stream, PS),适用于没有误差产生的媒体存储,如DVD等存储介质:另一种是传送流(Transport st ...
07 consistent gets、db block gets的简单精辟的理解
consistent gets.db block gets的简单精辟的理解 consistent gets:一致性读,为了保持读一致性而获取的块,其中可能包括undo block,也有包括非u ...
css模型框
在 CSS 中,width 和 height 指的是内容区域的宽度和高度.增加内边距.边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸. 假设框的每个边上有 10 个像素的外边距和 5 个 ...
13JavaScript运算符
运算符 = 用于给 JavaScript 变量赋值. 算术运算符 + 用于把值加起来实例指定变量值,并将值相加: y=5; z=2; x=y+z; 在以上语句执行后,x 的值是:7 1.JavaS ...
关于sparkStreaming(spark on yarn)的一个坑!
前些天我维护的一个streaming实时报表挂了,情况:数据无法实时更新增长,然后查看了报表所依赖的五张sqlserver的表,发现,只有1张的数据是正常写入的,还一张数据非正常写入,还有3张完全没有 ...

day4 CSS属性操作

1.CSS属性

基本属性

背景属性 background

属性介绍

边框属性border

属性介绍

2.dispaly属性

4.内边距(padding)和外边距(margine)

盒子模型

居中应用 <body style="margin: 0 auto">

5.float属性

2.overflow: hidden,auto

6.position(定位)

1. static

2. position:fixed

3. position: relative／absolute

4.opcity: 0.5 透明度

5. z-index:10 层级顺序

7.hover 鼠标效果

8.CSS练习

day4 CSS属性操作的更多相关文章

随机推荐

热门专题

　基本属性

　背景属性 background

　　　　属性介绍

　边框属性border

　　属性介绍

　　盒子模型

　　居中应用 <body style="margin: 0 auto">

　　2.overflow: hidden,auto

　　1. static

　　2. position:fixed

　　3. position: relative／absolute

　　4.opcity: 0.5 透明度

　　5. z-index:10 层级顺序