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

随机推荐

BZOJ1048:[HAOI2007]分割矩阵(记忆化搜索DP)
Description 将一个a*b的数字矩阵进行如下分割:将原矩阵沿某一条直线分割成两个矩阵,再将生成的两个矩阵继续如此分割(当然也可以只分割其中的一个), 这样分割了(n-1)次后,原矩阵被分割成 ...
matlab中的unique函数详解
https://blog.csdn.net/sinat_40282753/article/details/78373532
wfst讲解
一.比较好的博客 1.0 官方网站 1.1 语音识别解码器(1)—自动机与半环 1.2 走进语音识别中的WFST 1.3Kaldi WFST 构图学习二.比较好的paper 三.开源项目 3.1 ...
Jenkins+Ant+Jmeter接口自动化集成测试实例
Jenkins+Ant+Jmeter接口自动化集成测试实例一.Jenkins安装配置 1.安装配置JDK1.6+环境变量: 2.下载jenkins.war,放入C:\jenkins目录下,目录位置随 ...
android TextView里边实现图文混配效果
做的游戏攻略中的图文载入已经用TextView实现.但看到网易新闻里的内容.点击图片能够调到一个新的Activity ,感觉也像Textview 实现的,但不知道怎么弄,想想能够通过动态载入Textv ...
sharepoint 配置个人网站容量
we have a SharePoint 2013 Standard edition implementation and 80 users. We are now starting to use M ...
原生js创建模态框
1.效果图如下: 2.代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
oracle入门(二)
### 一,视图 ```1. 什么是视图视图是一张虚表, 可以把视图看成表使用(增删改查),视图中没有数据,所有的数据都在基本表中(tables) 封装了一个复杂的DQL 操作视图 ...
Framwork框架日志与配置工具的使用
一.使用设置: 头文件的添加: ..\Framwork\Include\pthread_64; ..\Framwork\CommFramwork\include; ..\Framwork\Utilit ...
VmWare入门指南
记得以前有大佬曾教过我们用win10的自带双系统运行Ubuntu,但这玩意儿好像玩起来并不简单(反正本人试了一上午也没成功),而且这个系统是和windows交互的,我们也很难调整性能参数.今天,我来教 ...

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