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元 ...

随机推荐

PaaS平台– Google App Engine的开源实现AppScale环境搭建
搭建好开发环境介绍: 硬件平台:HP Z800 工作站内存:24GB 硬盘:1TB 虚拟化环境:XenServer 6.2.0 VM1:Ubuntu 12.04 amd64 server ...
ThinkPhp表单令牌和字段映射
开启表单令牌: 先在配置文件目录下定义tags.php 在里面添加 return array( 'view_filter' =>array('Behavior\TokenBuildBehavio ...
CGContextRef 用法总结
0 CGContextRef context = UIGraphicsGetCurrentContext(); 设置上下文1 CGContextMoveToPoint 开始画线2 CGContext ...
用 S5PV210 学习 Linux （一）刷机（一）
简介: 习惯了用 keil 或者 IAR 一键下载 (烧写) 代码,S5PV210 貌似就不能这么简单用仿真器的方式下载代码了,因此学习 S5PV210 的第一步就是学习怎么下载代码,下 ...
linux 编译ffmpeg 支持x264, x265
1. 前言本教程涉及的ffmpeg, x264, x265 2. 环境依赖 2.1 删除系统中安装的ffmpeg等库 sudo apt-get --purge remove ffmpeg mplay ...
DDL-数据类型
一.数值型1.整型tinyint.smallint.mediumint.int/integer.bigint1 2 3 4 8 特 ...
ora.ctssd OBSERVER
[grid@ydb1 ~]$ crsctl status res -t -init ora.ctssd 1 ONLINE ONLINE ydb1 ...
iOS 封装一个带复制功能的UILabel
我们发现UILabel不在为我们提供长按弹出复制等操作了, 我们来继承UILabel自己写一个带复制功能的UILabel. 代码: #import "CopyLabel.h" @i ...
iOS之利用腾讯Bugly程序调试，测试代码bug、卡顿等情况
1.自己先写一个 Demo 演示一下利用bugly测试崩溃的具体情况. 在ViewController里面实现崩溃代码如下: 运行后毫无疑问程序报错了! 2.使用到第三方的框架Bugly,官方下载 ...
Ubuntu18.04安装mysql及相关配置
step 1: sudo apt-get update step 2: sudo apt-get install mysql-server step3: 查看mysql服务端是否开启 systemct ...

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 层级顺序