1  颜色属性

<div style="color:blueviolet">ppppp</div>

<div style="color:#ffee33">ppppp</div>

<div style="color:rgb(255,0,0)">ppppp</div>

<div style="color:rgba(255,0,0,0.5)">ppppp</div>

2  字体属性

font-size: 20px/50%/larger

font-family:'Lucida Bright'

font-weight: lighter/bold/border/

3  背景属性

border:1px solid red;

background-color: cornflowerblue;

background-image: url('1.jpg');

background-repeat: no-repeat;(repeat:平铺满)

background-position: right(左右距离) top（上下距离）（20px 20px）;(横向：left center right)(纵向：top center bottom)

简写：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">


<div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">

eg：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        span{

            display: inline-block;

            width: 18px;

            height: 20px;

            background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");

            background-position: 0 -100px;

        }

    </style>

</head>

<body>

    <span></span>

</body>

</html>

 4.文本属性

font-size: 10px;

text-align: center;   横向排列

line-height: 200px;   文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比

vertical-align:－4px  设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效


text-indent: 150px;    首行缩进

letter-spacing: 10px;  字母间距

word-spacing: 20px;    单词间距

text-transform: capitalize; 单词首字母大写

5.边框属性

border-style: solid; 边框样式实线 dashed是虚线

border-color: red;   边框颜色

border-width: 20px;  边框宽度

简写：border:边框宽度 边框颜色 边框样式，例如
border: 30px rebeccapurple solid; 

border-left boder-right boder-top boder-bottom

6   列表属性

ul,ol{   list-style: decimal-leading-zero;

         list-style: none;    除去列表样式 
　　　    list-style: circle;

         list-style: upper-alpha;

         list-style: disc; }

7  dispaly属性

none 隐藏

block 块元素

inline 内联元素
inline-block 内联元素具有块元素属性

8.eg：表格居中

        #div1 {

            text-align: center;

        }

        #div2 {

            margin:50px auto;

            border: 5px red dashed;

            width: 500px;

            height: 500px;

        }

    </style>

</head>

<body>

<!--action 定义表单数据提交地址-->

<div id="div1">

<div id="div2">

<form action="http://127.0.0.1:8000/post_info" method="get" enctype="multipart/form-data">

    <!--单行文本框-->

    <input type="text" name="username" placeholder="请输入账号"><br><br>

    <!--密码框-->

    <input type="password" name="password" placeholder="请输入密码"><br><br>

    <!--单选框-->

    性别：<label><input type="radio" name="sex" value="1">男</label>

    <label><input type="radio" name="sex" value="2">女</label>

    <!--多选框-->

    <br><br>

    最喜欢的游戏：

    <label><input type="checkbox" name="fav" value="LOL">英雄联盟</label>

    <label><input type="checkbox" name="fav" value="shoot">喷射战士</label>

    <label><input type="checkbox" name="fav" value="zelder">塞尔达传说</label>

    <label><input type="checkbox" name="fav" value="mario">马里奥</label>

    <!--上传图片-->

    <br><br>

    <input type="file" name="pic">

    <!--多行文本框-->

    <br><br>

    <textarea name="text" cols="30" rows="10"></textarea>

    <!--下拉列表-->

    <br><br>

    <select name="city">

        <option value="gz">广州</option>

        <option value="sz">深圳</option>

        <option value="zh">中山</option>

    </select>

    <!--提交表单-->

    <input type="submit" value="提交">

    <!--重置表单-->

    <input type="reset" value="重置">

</form>

</div>

</div>

参考：https://www.cnblogs.com/yuanchenqi/articles/5977825.html

CSS 颜色 字体 背景 文本 边框 列表 display属性的更多相关文章

  1. css中的背景、边框、补丁相关属性

    css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...

  2. css（字体，文本，边距，边框，阴影，背景，渐变，多重背景，列表）

    font-family 设置字体名称 可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体 p { font-family:'宋体','黑体','Arial'; } font-size ...

  3. 3、前端--伪元素选择器、选择器优先级、字体、背景、边框、display、盒子模型

    伪元素选择器 # 首字调整>>>:也是一种文档布局的方式 p:first-letter { font-size: 48px; /*字体大小*/ color: red; } # 在文本 ...

  4. 关于文字颜色/图片背景---selector状态列表

    文字颜色 android:textColor="@style/style_name" ----------------------------------widget 图片背景 a ...

  5. [转载]CSS教程--字体与文本属性

    b>font-family功能:用于改变HTML标志或元素的字体,你可设置一个可用字体清单.浏览器由前向后选用字体.语法:{font-family:字体1,字体2, ... ,字体n} font ...

  6. css 基础 字体和文本样式

    字体样式处理font-size:30px:// 设置字体大小 font-weight:700://设置粗体 font-sytle:italic; //设置文字斜体 font-family: 斜体,宋体 ...

  7. Pyqt 设置 背景颜色和背景图片、 QPalette 调色板 与QPainter 画板区别 、 不规则图片

    设置 背景颜色和背景图片 首先设置autoFillBackground属性为真然后定义一个QPalette对象设置QPalette对象的背景属性(颜色或图片)最后设置QWidget对象的Palette ...

  8. CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  9. 1 CSS简介&语法&选择器及优先级&背景&文本&字体&链接&列表&表格

    什么是CSS? Cascading Style Sheets层叠样式表,样式定义如何显示HTML元素 样式通常存储于样式表中,外部样式表通常存储在CSS文件中 多个样式定义可层叠为1,样式对网页中元素 ...

随机推荐

  1. 简述ARP请求过程(同一子网和不同子网)

    1. 同一子网 主机A在准备构造链路层以太网帧头时,首先根据目的IP去查找ARP表,如果找到对应项,则直接得到目的MAC地址,如果没有查到才执行上面所说的ARP广播请求.这样做是为了最大限度地减少广播 ...

  2. Java之IO(九)其它字节流

    转载请注明源出处:http://www.cnblogs.com/lighten/p/7063161.html 1.前言 之前的章节已经介绍了java的io包中所有成对(输入.输出对应)的字节流,本章介 ...

  3. [转]ASP.NET Core 十种方式扩展你的 Views

    http://www.cnblogs.com/savorboard/p/aspnetcore-views.html

  4. postman—数据同步和创建测试集

    postman使用之二:数据同步和创建测试集 一.数据同步 启动postman 后在右上角可以登录账号,登录后就可以同步自己的api测试脚本,连上网在办公区在家都可以同步. 二.创建测试集 1.点击c ...

  5. Python单行注释与多行注释

    >>> print "hello,world"hello,world>>> 2+24#单行注释 """每行代码的后 ...

  6. Notepad++软件的下载与安装步骤（图文详解）

    不多说,直接上干货! 这款软件非常好用!!!   1.下载Notepad++软件 Notepad++非常好用,想要安装首先我们要下载(废话)~ 百度搜索“Notepad++”直接就可以找到主页: 主页 ...

  7. asp.net页面传值方法汇总

    1. Get(即使用QueryString显式传递)     方式:在url后面跟参数.     特点:简单.方便.     缺点:字符串长度最长为255个字符:数据泄漏在url中.     适用数据 ...

  8. Lucene系列-facet--转

    https://blog.csdn.net/whuqin/article/details/42524825 1.facet的直观认识 facet:面.切面.方面.个人理解就是维度,在满足query的前 ...

  9. [Codeforces 932E]Team Work

    Description 题库链接 求 \[\sum_{i=1}^n C(n,i)\times i^k\] \(1\leq n\leq 10^9, 1\leq k\leq 5000\) Solution ...

  10. JavaScript shift()函数移出数组第一个数据

    pop() 函数用来移出数组中最后一个元素.如果想要移出第一个元素要怎么办呢? .shift() 就是专门用来处理这类型需求的.它的工作原理类似 .pop(),但它移除的是第一个元素,而不是最后一个.