CSS基础--常用样式

一、背景相关

背景颜色

background-color ：颜色名称/rgb值/十六进制值

背景图片

background-image　：url('')

背景图片平铺方式

background-repeat　：　repeat-x(仅水平重复) repeat-y(仅垂直重复) no-repeat(不重复)

设置背景图片位置

background-position　：　　数字+单位/center/top/bottom/left/right 同上。例如：50px 50px

背景图片是否滚动

background-attachment　：　　fixed(不滚动) scroll（滚动）

dmeo:

设置页面的body背景：

<!DOCTYPE html>

<html lang="en">

<head>

</head>

<style>

    body{ background-color: aquamarine;

         background-image: url("cool.jpeg");

         background-repeat:repeat-y ;

         background-position: top;

         background-attachment: fixed;

    }

</style>

<body>

</body>

</html>

二、边框、边距

边框：border

用法：

border: 1px solid red; 表示边框宽度(border-width)为1px，边框样式(border-style)为实线，边框颜色(border-color)为红色
其中常用的边框样式有：solid 实线 dashed 虚线 dotted 点线

border表示全部设置，单独设置边框上/下/左/右边框将border替换为border-top、border-bottom、border-left、border-right。

外面距：margin

用法：

margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。
margin 可以设置为 auto。更常见的做法是为外边距设置长度值。下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白：

使用margin:0px auto;可以将定宽的块元素设置为居中显示

h1 {margin : 0.25in;}

下面的例子为 h1 元素的四个边分别定义了不同的外边距，所使用的长度单位是像素 (px)：

h1 {margin : 10px 0px 15px 5px;}

分别设置外边距，这些值的顺序是从上外边距 (top) 开始设置上、右、下、左：

margin: top right bottom left

单独设置外边距：

margin-top|margin-right|margin-bottom|margin-left：单位

另外，还可以为 margin 设置一个百分比数值：

p {margin : 10%;}

还可以单独设置上下、左右，例如设置上下边距0，左右编辑10px：

p {margin : 0 10px;}

百分数是相对于父元素的 width 计算的。上面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。
margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现外边距。但是，在实际中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。例如，在支持 CSS 的浏览器中，外边距会在每个段落元素的上面和下面生成“空行”。因此，如果没有为 p 元素声明外边距，浏览器可能会自己应用一个外边距。当然，只要你特别作了声明，就会覆盖默认样式。

内边距：padding （与外边距类似）

三、字体

字体大小 font-size：数字+单位

水平居中：text-align：center

垂直居中：line-height: 数字+单位（高度设置为和标签的高度一样）

字体样式：font-style：normal(正常) italic(斜体) oblique (粗体)

字体加粗：font-weight：数字+单位／normal(默认值。定义标准的字符)、bold(更粗的字体)、bolder(比bold粗)、lighter(更细的字体)

字体种类：font-family：字体名字("times"、"courier"、"arial"、"宋体")

demo：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>wd</title>

</head>

<body>

<div style="font-family: 宋体 ;

            height: 40px;

            border:1px solid red;

            font-size: large;

            color: aquamarine;

            text-align:center;

            line-height: 40px">hello word

</div>

</body>

</html>

四、float浮动

效果：让多个元素堆叠在一起

left：元素向左浮动

right：元素向右浮动

none：默认值不浮动

inherit: 规定应该从父元素继承 float 属性的值

当子标签浮动起来将父标签遮盖时候，使用style="clear :both",将所有标签都显示。

五、position

positon:将标签分层，固定位置

值：

fixd：生成绝对定位的元素，相对于浏览器窗口进行定位（位置随浏览器窗口滚动而滚动）。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行定位。

应用场景：比如网页中的“返回顶部”按钮、或者菜单栏永远在顶部

demo：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div style="background-color: aqua;

            height: 38px;

            position: fixed ;top: 0;right: 0;left: 0;

            text-align: center;

            line-height: 38px">菜单</div>

<div style="background-color:#dddddd;height: 2000px">内容</div>

</body>

</html>

菜单栏永远在顶部demo

absolute：绝对定位，绝对于浏览器窗口定位（位置不会改变），元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行定位，通常与relative一起使用。

relative：相对定位，与absolute进行定位，relative为父标签，子标签absolute相对与relative进行定位

absolute+relative应用：是一个标签相对于另一个标签进行绝对定位。

demo：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

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

             height: 300px;

             width: 300px;

             margin: 0 auto;

             position: relative">

    <div style="background-color: black;

                height: 50px;

                width: 50px;

                position: absolute;

                right: 0px;

                bottom: 10px;">

    </div>

</div>

</body>

</html>

relative+absolute应用

tips:通过opacity可设置div的透明度，值为0.0-1.0（透明-不透明）

Z-index：当有多层样式，可通过Z-index设置优先级，优先级（值越大）越高，层次越在最上面。

应用场景：网页遮罩层

其他常用标签

display：改变标签属性(块级/行内)

常用值：

block:使标签具有块级标签属性

inline:使标签具有行内标签属性

inline-block：使用标签既有行内标签属性又有块级标签属性

none：不显示标签

其他值如下：

tips：如果是行内标签无法设置高度、宽度、边距。

overflow：设置内容溢出时，出现滚动条或者隐藏

值：

hidden:隐藏溢出的内容

auto：溢出内容出现滚动条

demo：

<body>

<div style="width: 500px ; height:300px;overflow: auto">

    <img src="timg.jpeg">

</div>

</body>

溢出部分出现滚动条

hover：设置当鼠标指针浮动在元素上时显示样式

用法：

.pg-a:hover{

            background-color: cornflowerblue;

        }

demo：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>

        .pg-menu{

            height: 48px;

            background-color: darkblue;

        }

        .pg-a{

            display: inline-block;

            color: white;

            font-family: "微软雅黑";

            line-height: 48px;

            height: 48px;

            width: 60px;

            padding: 0 10px;

        }

        .pg-a:hover{

            background-color: cornflowerblue;

        }

    </style>

    <title>Title</title>

</head>

<body style="margin: 0 auto">

<div class="pg-menu">

    <a class="pg-a">全部</a>

    <a class="pg-a">操作</a>

    <a class="pg-a">仪表盘</a>

    <a class="pg-a">资产</a>

</div>

</body>

</html>

菜单按钮变色

CSS样式应用案例

1、background-image应用之显示各种小图标

通过固定div大小然后调整background-position来显示一张图片上的不同的图标。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .w {

            background-image: url(icon_18_118.png);

            width: 19px;

            height: 20px;

            background-repeat: no-repeat;

            border: 1px solid red;

            background-position-y: -39px;

        }

    </style>

</head>

<body>

<div class="w">

</div>

</body>

</html>

2、登录框图标应用

通过position分层将登录框和登录图片分两层实现

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .pg-username{

            width: 150px;

            height: 30px;

            position: relative;

            background: darkgray;

            padding-left: 25px;

        }

        .username-image{

            display: inline-block;

            width: 26px;

            height: 27px;

            position: absolute;

            background-image: url(images/username_wev8.png);

            background-repeat: no-repeat;

            top: 5px;

        }

        .passwd-image{

            display: inline-block;

            width: 26px;

            height: 27px;

            position: absolute;

            background-image: url(images/password_wev8.png);

            background-repeat: no-repeat;

            top: 5px;

        }

    </style>

</head>

<body>

    <div style="position: relative ;width: 100px;height: 40px">

        <input type="text" class="pg-username">

        <span class="username-image"></span>

    </div>

    <div style="position: relative ;width: 100px;height: 40px">

        <input type="text" class="pg-username">

        <span class="passwd-image"></span>

    </div>

</body>

</html>

后台页面布局

1.float模型布局（不推荐）

顶部菜单在上面，菜单栏float在左边，内容float在右边，通过设置最小宽度来固定页面，缺点当出现滚动条时候，左侧菜单和上面菜单将会逐渐消失。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .left{

            float: left;

        }

        .right{

            float: right;

        }

        .pg-header{

            background-color: aqua;

            height: 48px;

            min-width: 500px;

        }

        .pg-menue{

            background-color: darkblue;

            width: 5%;

            height: 700px;

        }

        .pg-contetx{

            background-color:#dddddd ;

            width: 95%;

            overflow: auto;

        }

    </style>

</head>

<body style="margin: 0 auto">

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

    <div>

        <div class="pg-menue left"></div>

        <div class="pg-contetx right">

            <div>内容</div>

            <div>内容</div>

            <div>内容</div>

            <div>内容</div>

            <div>内容</div>

            <div>内容</div>

            <div>内容</div>

            <div>内容</div>

            <div>内容</div>

        </div>

    </div>

</body>

</html>

2.position布局（推荐）

使用position固定位置，弥补float菜单消失缺点，内容多使用overflow。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .pg-header{

           background-color: #1c5a9c;

            height: 48px;

        }

        .pg-menu{

            position: absolute;

            top:48px;

            left: 0;

            background-color: #3388ff;

            width: 80px;

            bottom: 0;

        }

        .pg-context{

            position: absolute;

            left: 81px;

            background-color: #dddddd;

            bottom: 0;

            right: 0;

            top:48px;

            overflow: auto;

        }

    </style>

</head>

<body style="margin: 0 auto">

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

    <div class="pg-menu"></div>

    <div class="pg-context"></div>

</body>

</html>

3.布局应用之头像菜单,图标菜单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">

    <style>

        .left {

            float: left;

        }

        .right {

            float: right

        }

        .pg-header {

            background-color: cornflowerblue;

            height: 48px;

            min-width: 500px;

        }

        .pg-menue {

            background-color: blue;

            width: 100px;

            height: 700px;

            position: absolute;

            top: 48px;

            left: 0;

        }

        .pg-contetx {

            background-color: #dddddd;

            position: absolute;

            top: 48px;

            right: 0;

            left: 100px;

            overflow: auto;

        }

        .header-img {

            height: 40px;

            width: 40px;

            border-radius: 50%;

            margin-top:4px;

            margin-left:16px;

        }

        .header-logo {

            color: white;

            font-size: large;

            line-height: 48px;

        }

        .img-outer {

            height: 48px;

            width: 200px;

        }

        .img-inner {

            height: 48px;

            width: 150px;

        }

        .img-inner:hover .img-a{

            background-color: darkblue;

        }

        .my-munue {

            position: absolute;

            top: 45px;

            z-index: 100;

            display: none;

            color: white;

        }

        .img-inner:hover .my-munue {

            display: block;

        }

        .img-a{

            position: relative;

            width: 80px;

            height: 48px;

        }

        .fa:hover {

            color: #DDDDDD;

            text-shadow: 0px 0px 5px #dddddd,

            0px 0px 10px #dddddd,

            0px 0px 15px #dddddd;

            transition-duration: 1s;}

    </style>

</head>

<body style="margin: 0 auto ;background-color: #dddddd">

<div class="pg-header">

    <div class="img-outer right">

        <div class="img-inner">

            <div class="img-a">

                <img src="data:images/1111.jpg" class="header-img">

                <div class="my-munue">

                    <div>我的资料</div>

                    <div>设置</div>

                    <div>修改密码</div>

                </div>

            </div>

        </div>

    </div>

    <div>

    <div class="right">

        <div style="margin-top: 16px ">

            <i class="fa fa-user-o" aria-hidden="true"></i>

            <span>5</span>

        </div>

    </div>

        <span class="header-logo left">logo</span>

    </div>

    <div>

        <div class="pg-menue "></div>

        <div class="pg-contetx ">

            <div>内容</div>

            <div>内容</div>

            <div>内容</div>

            <div>内容</div>

            <div>内容</div>

            <div>内容</div>

            <div>内容</div>

            <div>内容</div>

            <div>内容</div>

        </div>

    </div>

</div>

</body>

</html>

tps：图标网站:http://fontawesome.io/icons/

CSS基础--常用样式的更多相关文章

CSS/CSS3常用样式小结
1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...
#8.10.16总结# 属性选择符伪对象选择符 CSS的常用样式
属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val ...
[总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...
css基础--常用css属性02
上篇地址:css基础--常用css属性01 本文参考菜鸟教程和w3school 1 浮动和清除浮动在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和 ...
HTML&CSS基础-常用选择器
HTML&CSS基础-常用选择器作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...
[19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
CSS 基础知识点样式选择器伪类
CSS 基础知识点汇集版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...
css基础--常用css属性01
1 背景相关背景颜色 background-color = 颜色名称/rgb值/十六进制值背景图片 background-image = url('') 背景图片平铺方式 backgro ...
css基础：样式属性
1.背景与前景:background-color::背景色,样式表优先级高. background-image:url(路径):设置背景图片 background-attachment:fixed:背 ...

随机推荐

如何用Python在豆瓣中获取自己喜欢的TOP N电影信息
一.什么是 Python Python (蟒蛇)是一门简单易学. 优雅健壮. 功能强大. 面向对象的解释型脚本语言.具有 20+ 年发展历史, 成熟稳定. 具有丰富和强大的类库支持日常应用. 1989 ...
CSS预编译器less简单用法
1.变量定义变量 @变量名:值; @test_width:100px; 使用变量 .box{ width:@test_width; height:@test_width; background-co ...
固定底部导航菜单-续集（BottomMenu-移动端V3.0）
固定底部导航菜单-续集(BottomMenu-移动端V3.0) 适应在客户端,点击弹出二级菜单.因为手机不支持hover.所以使用click点击实现弹出菜单,并且一级菜单聚焦变色,变化背景图片核心c ...
VMware仅主机模式虚拟机无法ping通物理机
问题描述在VMware Workstation中新建了一个虚拟机CentOS7,网络适配器选择的是"仅主机模式",结果,物理机ping不通虚拟机,虚拟机也ping不通物理机. 原 ...
Jerry的通过CDS view + Smart Template 开发Fiori应用的blog合集
S4/HANA里有一个新的UI框架叫做Smart template, 配合ABAP后台的CDS view技术,能够让developer以Metadata driven的方式来开发Fiori应用, 这种 ...
SQL 语句优化方法
尽量避免非操作符的使用,在索引上使用 NOT,<> 等操作符,数据库管理系统是不会使用索引的,可以将查询语句转化为可以使用索引的查询. 避免对查询的列的操作,任何对列的操作都可能导致全表扫 ...
利用TortoiseGit对Coding项目进行版本管理
Git配置: 1),首先去Git官网下载最新的Git,https://git-for-windows.github.io/ 2),下载对应的版本,然后一路next点击安装. Git与Coding联通 ...
android支付宝app支付(原生态)-包括android前端与java后台
本文讲解了 android开发的原生态app集成了支付宝支付, 还提供了java后台服务器处理支付宝支付的加密代码, app前端与java后台服务器使用json数据格式交互信息,java后台服务主要用 ...
TLB和MMU的区别
MMU是Memory Management Unit的缩写,中文名是内存管理单元,它是中央处理器(CPU)中用来管理虚拟存储器.物理存储器的控制线路,同时也负责虚拟地址映射为物理地址,以及提供硬件机制 ...
webAPI+angularJS文件上传和下载
开发框架前端 angularJS1.6 下载和保存文件FileSaver:https://github.com/eligrey/FileSaver.js/ 后端 .net WebAPI 1 导入Ex ...

CSS基础--常用样式

CSS基础--常用样式的更多相关文章

随机推荐

热门专题