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属性操作的更多相关文章

  1. CSS属性操作/下

    CSS属性操作/下 1.伪类 anchor伪类 跟<a>/</a>有关:专用于控制链接的显示效果 a:link(没有接触过的链接),用于定义了链接的常规状态. a:hover( ...

  2. CSS属性操作

    CSS属性操作 1 属性选择器 Elenment(元素) E[att] 匹配所有具有att属性的E元素,不考虑它的值.(注意:E在此处可以省略)(推荐使用) 例如:[po]{ font-size: 5 ...

  3. 前端基础：CSS属性操作

    CSS属性操作 1.文本 文本颜色:color,颜色属性被用来设置文字的颜色,颜色是通过CSS经常指定的,其格式有: 1.十六进制:#FF0000: 2.RGB值:RGB(255,0,0): 3.颜色 ...

  4. 前端基础-CSS属性操作

    前端基础-CSS属性操作 css text 文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB( ...

  5. CSS属性操作一

    CSS属性操作 一.CSS text 1.文本颜色:color 颜色属性被用来设置文字的颜色.颜色是通过CSS最经常的指定: • 十六进制值 - 如: #FF0000 • 一个RGB值 - 如: RG ...

  6. 52、css属性操作

    前面说的主要是css的使用规则和选择器等,这篇主要讲解css的具体使用. 一.css text 1.文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 1)十六进制值 ...

  7. 4、css属性操作

    前面说的主要是css的使用规则和选择器等,这篇主要讲解css的具体使用. 本篇导航: css text 背景属性 边框属性 列表属性 dispaly属性 外边距(margine)和内边距(paddin ...

  8. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

  9. CSS属性操作二

    9.float属性 基本浮动规则 先来了解一下block元素和inline元素在文档流中的排列方式. block元素通常被现实为独立的一块,独占一行,多个block元素会各自新起一行,默认block元 ...

随机推荐

  1. 前端工程师使用 Deepin 笔记

    笔者是一枚前端开发,在学习 Linux 的时候碰到了一个问题 —— 怎么练手?因为自己电脑上面装的是 Windows 系统,所以学习 Linux 的时候没办法进行练习,而敲指令是学习 Linux 最高 ...

  2. 使用highmaps制作中国地图

    Highmaps 所需文件 http://code.highcharts.com/maps/highmaps.js(地图渲染的核心文件 必须引用)http://code.highcharts.com/ ...

  3. [Python 练习爬虫] XPATH基础语法

    XPATH语法: // 定位根标签 / 往下层寻找 /text() 提取文本内容 /@xxx 提取属性内容 Sample: import requests from lxml import etree ...

  4. 自己制作html页面用的字体图标。

    从网上看到的一个制作字体图标的教程,自己试用过,确实还不错,就把教程搬过来了,方便查看. 我们UI做出来矢量的图,放到这个软件里操作,下面有教程,之后输入.ttf或是.otf格式的字体,我是在网上找了 ...

  5. 依赖项从GIT上拉下来出现黄色三角形解决方法

    1.进入程序包管理器设置 2.添加程序包源=>输入名称(自己定\默认)=>NuGet源地址https://nuget.org/api/v2/(2019年1月30号可用)更新确认后重生项目即 ...

  6. IE6下出现横向滚动条问题的解决方案

    当我们在css样式设置为html {overflow-y:auto;}时,在ie7以上版本应用时不会有问题,可是在ie6下就会发现垂直滚动条出现会引起横向滚动条出现.究其原因是在ie6下,当内容过多出 ...

  7. yyy loves Easter_Egg I（恶心的字符串模拟）

    题目背景 Soha的出题效率着实让人大吃一惊.OI,数学,化学的题目都出好了,物理的题还没有一道.于是,Huntfire,absi2011,redbag对soha进行轮番炸,准备炸到soha出来,不料 ...

  8. ZJOI2008]树的统计（树链剖分，线段树）

    题目描述 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w. 我们将以下面的形式来要求你对这棵树完成一些操作: I. CHANGE u t : 把结点u的权值改为t II. QMAX u ...

  9. nginx+uwsgi+flask+supervisor 项目部署

    环境 - Linux: Ubuntu 16.04 - uWSGI 2.0.18 - Flask 1.0.2 - supervisor 3.2.0 - nginx/1.8.1 首先区分几个概念 WSGI ...

  10. WebGl 平移（矩阵变换）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...