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. Netty核心概念(8)之Netty线程模型

    1.前言 第7节初步学习了一下Java原本的线程池是如何工作的,以及Future的为什么能够达到其效果,这些知识对于理解本章有很大的帮助,不了解的可以先看上一节. Netty为什么会高效?回答就是良好 ...

  2. php 页面 不显示任何错误提示

    error_reporting(0); ini_set('html_errors',false); ini_set('display_errors',false);

  3. Chapter 3 Phenomenon——7

    "Bella? Are you all right?" “贝拉?你还好吗?” "I'm fine." My voice sounded strange. “我还 ...

  4. Python2.x 中文乱码问题

    Python 文件中如果未指定编码,在执行过程会出现报错: #!/usr/bin/pythonprint "你好,世界"; 以上程序执行输出结果为: File "test ...

  5. 面试题26：合并k个排好序的单链表

    Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity. c ...

  6. 面试题20：搜索二叉树可能有两个元素发生了交换，如何恢复BST？

    Two elements of a binary search tree (BST) are swapped by mistake. Recover the tree without changing ...

  7. sqlserver中利用Tran_sql把逗号分隔的字符串拆成临时表

    在与数据库交互的过程中,我们经常需要把一串ID组成的字符串当作参数传给存储过程获取数据.很多时候我们希望把这个字符串转成集合以方便用于in操作. 有两种方式可以方便地把这个以某种符号分隔的ID字符串转 ...

  8. c# 键值对照表

    虚拟键值表 虚拟键 十六进制值 十进制值 相应键盘或鼠标键 VK_LBUTTON 1 1 鼠标左键 VK_RBUTTON 2 2 鼠标右键 VK_CANCEL 3 3 Ctrl-Break键 VK_M ...

  9. tomcat shutdown.sh结束不了，Could not contact localhost:8005

    使用./shutdown.sh关闭Tomcat,有时会关闭成功,有时会出现关闭错误; Jul 06, 2017 10:57:37 AM org.apache.catalina.startup.Cata ...

  10. [转]一步步学习EF Core(2.事务与日志)

    本文转自:http://www.cnblogs.com/GuZhenYin/p/6862505.html 上节我们留了一个问题,为什么EF Core中,我们加载班级,数据并不会出来 其实答案很简单,~ ...