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. CentOS 安装Scrapy

    本文python版本是python3.5.3,关于升级python和安装pip请到:http://www.cnblogs.com/technologylife/p/6242115.html 安装相关包 ...

  2. mysqldump: Got errno 32 on write 解决办法

    在执行mysqldump 时发生 mysqldump: Got errno 32 on write 报错: $ sudo mysqldump -u root -p ******* | gzip > ...

  3. Builder生成器(创建型模式)

    一.使用场景: 1.假设要创建一个House设施,该设施的创建由若干个部分组成,而且这若干个部分经常变化. 如果用最直观的设计方式,每一个房屋部分的变化,都将导致整个房屋结构的重新修正,但是这种设计方 ...

  4. Android_PullListView

    ListView 下拉刷新,上拉加载更多的原理: (1)主要是onScroll()方法和onTouchEvent()方法,先是onTouchEvent()的ACTION_DOWN,然后是 ACTION ...

  5. 关于class的签名Signature

    举例1: public class Test05<A, B extends java.util.List<String>, C extends InputStream&Ser ...

  6. 解决linux安装软件依赖的曲线救国方案

    相信大家在一台无法连接外网的linux上安装软件时,对于软件依赖的安装,都会特别头疼,因为软件依赖的安装,不论是其数量,还是安装的复杂度都比软件本身要高出一个维度! 今天就和大家分享一个,解决linu ...

  7. C语言中的按位移动及其简单引用

    C语言中的按位移动及其简单应用 在C语言中按位左移用”<<”表示,按位右移用”>>”表示. 按位左移和按位右移运算经常被用来替换乘二和除二运算,但是要注意,这两者之间并不完全等 ...

  8. java中删除list指定元素遇到的问题

    java删除list中指定的元素可以用remove()函数,但会存在一个问题,举个例子来说 假如有a,b,c,d,e这个list,用remove()方法删除第一个元素之后,b,c,d,e会往前移动,此 ...

  9. 纯Java JDBC连接数据库，且用JDBC实现增删改查的功能

    Java JDBC连接数据库 package cn.cqvie.yjq; import java.sql.*; /** * 注册数据库的驱动程序,并得到数据库的连接对象 * @author yu * ...

  10. FSM有限状态机

    1.什么是有限状态机 有限状态机(Finite State Machine),简称FSM,它由一组有限个状态.输入和根据输入及现有状态转换为下一个状态的转换函数组成,当然,通常每个状态机都必须有一个初 ...