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:背 ...

随机推荐

Netty之ProtoBuf(六)
Protocol Buffer的基本使用(六) 一.简介 Protocol Buffer(简称ProtoBuf)是google的一个语言中立,平台中立,可扩展的对结构化的数据进行序列化的一种机制,和X ...
php mysql语句预编译（preparestatement）
预处理语句用于执行多个相同的 SQL 语句,并且执行效率更高. 预处理语句的工作原理如下: 预处理:创建 SQL 语句模板并发送到数据库.预留的值使用参数 "?" 标记 .例如: ...
Java中Optional使用注意事项
前言之前遇到过使用Optional之后带来的隐含bug,现在强调记录一下不好的用法,防止错用. Optional不能序列化,不能作为类的字段(field) 这点尤为重要,即类要纯粹.如果是POJO就 ...
申请的服务器安装tomcat后不能访问的问题
新申请的阿里云服务器,操作系统是CentOS6.5,安装jdk1.8版本,用java -version命令可以查看jdk版本,安装正确会有版本显示.然后安装tomcat,tomcat安装后默认端口是8 ...
Java学习笔记12（面向对象五：构造方法、this再探）
在开发中,经常需要在创建对象的同时明确对象对的属性值, 比如一个Person对象创建时候就应该有age和name等属性那么如何做到在创建对象的同时给对象的属性初始化值呢? 这里介绍构造方法: 1.构 ...
Ubuntu 安装Appium
1.安装node apt-get install node.js 2.安装npm apt-get install npm 3.安装cnpm npm install -g cnpm 创建链接:ln -s ...
centos6.5 redis搭建
redis安装1.wget http://download.redis.io/redis-stable.tar.gz2.tar -zxvf redis-stable.tar.gz3.cd redis- ...
while求1+2+3+4+5+6....100的和
#求1到100的和. #声明i初始变量 i = 1 #声明y初始变量 y = 1 #开始循环条件为i不等于100,则执行while代码块 while i != 100: #给i加1 i += 1 #y ...
Excel生成guid、uuid
1.Excel生成guid,uuid 格式:600d65bc-948a-1260-2217-fd8dfeebb1cd =LOWER(CONCATENATE(DEC2HEX(RANDBETWEEN(, ...
JAVA实现跳一跳辅助程序之虎啸龙吟
前序: 今天有幸,看到2位博主的文章,在此表示感谢.自己也动手实现了一下. 实现原理请参考博主 https://www.cnblogs.com/dongkuo/p/8285162.html 另感谢博 ...

CSS基础--常用样式

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

随机推荐

热门专题