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

随机推荐

vue笔记2
vue项目目录 <pre> ├── build // 构建服务和webpack配置 ├── config // 项目不同环境的配置 ├── dist // 项目build目录 ├── in ...
pythone 请求响应字典
_RESPONSE_STATUSES = { # Informational 100: 'Continue', 101: 'Switching Protocols', 102: 'Processing ...
【node.js】Buffer(缓冲区)
Node.js中,定义了一个 Buffer 类,该类用来创建一个专门存放二进制数据的缓存区. 创建 Buffer 类 Node Buffer 类可以通过多种方式来创建. 1.创建长度为 10 字节的 ...
appium 环境安装windows
创建AVD -c --sdcard : 指向一个共享的SD存储卡的路径,或者是新的SD储存卡容量大小. -n --name : AVD的名字(该项是必须的) -a --snapshot ...
[LuoguP2403][SDOI2010]所驼门王的宝藏
题目描述在宽广的非洲荒漠中,生活着一群勤劳勇敢的羊驼家族.被族人恭称为"先知"的Alpaca L. Sotomon是这个家族的领袖,外人也称其为"所驼门王". ...
用PSCP在Windows和Linux之间相互传输文件
在Linux服务器之间相互传文件我们常用 scp命令,但是在Linux和Windows之间相互传输就不那么直接了. 使用 Putty的 PSCP 则会简单的多 1. 下载 http://www.chi ...
结构体内存对齐 keil & STM32
直接上图不废话: 第二张图: 把16位类型的数据换成数组 ,这样达到节约内存和方便处理缓冲区数据
C#设计模式 —— 工厂模式
. 工厂模式同样是项目中最常用的设计模式,工厂模式中又分为简单工厂,工厂方法,抽象工厂.下面我们由简单的开始逐一介绍. 1.简单工厂模式简单工厂又被称为静态工厂,在设计模式中属于创建型模式.主要解决 ...
Runtime - ② - NSObject类
首先,我们都知道NSObject是大多数类的根类,但是,这个类的是怎么实现的呢?我们可以去下载开源的Runtime源码,探究下NSObject类的实现. 1. NSObject.h文件我们可以直接使 ...
java spring-WebSocket json参数传递与接收
Websocket原理(摘抄) 一.websocket与http WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连接,循环 ...

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