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. 【优化】Filddler用于移动端

    Fiddler是一个非常强大的Web调试工具,它能捕获所有客户端和服务器的http和https请求,我们可以对请求监视.设置断点,也能修改输入输出数据,这些特性使得Fiddler成为广大web开发者的 ...

  2. Android中ListView的使用步骤

    第一步:  首先,在 布局文件中,声明listView控件. <ListView android:id="@+id/lv" android:layout_width=&quo ...

  3. 前端通信：ajax设计方案（二）---集成轮询技术

    上一篇文章介绍了ajax技术核心方法,和跨域的问题(只要后台支持跨域默认post就可以),这篇文章讲解一下使用ajax实现的轮询技术,至于iframe,SSE服务器单向推送,以及webSocket双工 ...

  4. 使用Visual Studio Code搭建PHP调试环境

    1.需要安装的软件 Visual Studio Code. WAMP(包括Apache.MySQL.PHP.以及最关键的XDebug) 2.下载软件 Visual Studio Code,光看名字就知 ...

  5. 体验 QQ机器人C# SDK 1.X 特性总结

    主要特性 依赖注入 框架本身采用 Autofac 作为依赖注入框架.进行插件开发时,必然会使用到该框架.建议开发者阅读官方文档熟悉其用法.https://autofac.readthedocs.io/ ...

  6. windows server服务器上部署java+tomcat网站域名配置

    如果只是部署java项目的话,可以把IIS删除,然后在服务器上安装jdk tomcat 配置好环境变量,就和你在自己计算机上开发一样,把你的项目war包拷到tomcat下的webapps里(任意目录都 ...

  7. C#实现软件授权，限定MAC运行（软件license管理，简单软件注册机制）

    一个绿色免安装软件,领导临时要求加个注册机制,不能让现场工程师随意复制.事出突然,只能在现场开发(离开现场软件就不受我们控了).花了不到两个小时实现了简单的注册机制,稍作整理. 基本原理:1.软件一运 ...

  8. 3.C#基础篇-->堆和栈

    一.前言 堆与栈对于理解.NET中的内存管理.垃圾回收.错误和异常.调试与日志有很大的帮助.垃圾回收的机制使程序员从复杂的内存管理中解脱出来,虽然绝大多数的C#程序并不需要程序员手动管理内存,但这并不 ...

  9. plupload如何删除一条数据

    FilesRemoved用了发现不成功,删除图片这么重要怎能如此 看到老外提的另一个问题发现这个问题解决办法,特此备注以供不会的童鞋参考 uploader.bind('FilesAdded', fun ...

  10. SpringBoot+Mybatis整合入门（一）

    SpringBoot+Mybatis 四步整合 第一步 添加依赖 springBoot+Mybatis相关依赖 <!--springBoot相关--> <parent> < ...