1、颜色属性

　　<div style="color:blueviolet">ppppp</div> 输入颜色英文单词

　　<div style="color:#ffee33">ppppp</div> 16进制颜色样式

　　<div style="color:rgb(255,0,0)">ppppp</div> 红绿蓝三原色按顺序

　　<div style="color:rgba(255,0,0,0.5)">ppppp</div> a代指透明度

2、字体属性：

　　font-size: 20px/50%/larger 字体大小

　　font-family:'Lucida Bright' 字体样式

　　font-weight: lighter/bold/border/ 字体粗细

　　line-height:40px; 字体上下调到居中位置

　　<h1 style="font-style: oblique">yusheng_liang</h1> 斜体

3、背景属性　

　　 margin-bottom: 2px; padding: 0px; box-sizing: border-box; color: rgb(85, 84, 84); font-size: 15px; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: rgb(251, 249, 249);">　　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')">

注意：如果讲背景属性加在body上，要记得给body加上一个height，否则结果异常，这是因为body为空，无法撑起背景图片，另外，如果此时要设置一个width＝100px，你也看不出效果，除非你设置出html。

4、文本属性

　　font-size: 10px;

　　text-align: center;横向排列

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

　　p

　　{ width: 200px;

　　height: 200px;

　　text-align: center;

　　line-height: 200px; }

　　text-indent: 150px;  首行缩进，50%：基于父元素（weight）的百分比

　　letter-spacing: 10px; 字体间距

　　word-spacing: 20px;

　　direction: rtl;  #右边开始

　　text-transform: capitalize; #字母

5   边框属性：

　　border-style: solid;

　　border-color: chartreuse;

　　border-width: 20px;

简写：border: 30px rebeccapurple solid;

     <!--border:有3个参数：线的粗细、线的样式（实线、点、虚线等）、线的颜色-->

     <!--第一种：线的粗细为1像素，实线、红色-->

     <div style="border:1px solid red;height:10px" ></div>

     <!--第二种：线的粗细为1像素，点、蓝色-->

     <div style="border:1px dotted blue;height:10px" ></div>

     <!--第三种：线的粗细为1像素、虚线、紫色-->

     <div style="border:1px dashed purple;height:10px" ></div>

6 、dispaly属性

  • none
  • block
  • inline
     <!--display 为none将隐藏标签-->

     <div style="display: none;">yusheng_liang</div>

     <!--display 为inline会将块级别标签调为内联标签-->

     <div style="background-color:red;display:inline">yusheng_liang</div>

     <!--display 为block会将内联标签调为块级别标签-->

     <a style="background-color:red;display:block">yusheng_liang</a>

7、列表属性

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

　　        list-style: none;  #去掉前面符号

　　　　  list-style: circle; #列表样式

　　        list-style: upper-alpha; #列表样式

　　       list-style: disc; } #列表样式

8、盒子模型

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。

9、float属性

9.1、定义和用法

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

9.2、属性值

值 描述
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。

10、position属性

10.1、定义和用法

　　position 属性规定元素的定位类型。

　　说明：

　　这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

10.2、属性值

值 描述
absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。

1、static，默认值 static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不 会被应用。 说到这里我们不得不提一下一个定义——文档流，文档流其实就是文档的输出顺序， 也就是我们通常看到的由左到右、由上而下的输出形式，在网页中每个元素都是按照这个顺序进行排序和显示的，而float和position两个属性可以将元素从文档流脱离出来显示。 默认值就是让元素继续按照文档流显示，不作出任何改变。

2、relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

3、absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 如果设定 position:relative，就可以使用 top,bottom,left和 right 来相对于元素在文档中应该出现的位置来移动这个元素。[意思是元素实际上依然占据文档 中的原有位置，只是视觉上相对于它在文档中的原有位置移动了] 当指定 position:absolute 时，元素就脱离了文档[即在文档中已经不占据位置了]，可以准确的按照设置的 top,bottom,left 和 right 来定位了。 如果一个元素绝对定位后，其参照物是以离自身最近元素是否设置了相对定位，如果有设置将以离自己最近元素定位，如果没有将往其祖先元素寻找相对定位元素， 一直找到html为止。

4、fixed：被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。

注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，    另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

html--前端css常用属性的更多相关文章

  1. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  2. 1+x证书学习日志——css常用属性

     ## css常用属性:             1:文本属性:                 文本大小:  font-size:18px;                 文本颜色    colo ...

  3. 02: css常用属性

    目录: 1.1 设置样式的七个选择器 1.2 css常见属性浅析 1.3 css布局中常用方法 1.1 设置样式的七个选择器返回顶部 1.其中选择器介绍 1. 直接在标签里的style标签写样式 2. ...

  4. CSS常用属性-xy

    一.文本Text CSS text-align 属性 文本对齐方式 CSS text-decoration 属性 text-decoration 属性规定添加到文本的修饰 CSS line-heigh ...

  5. css常用属性总结：颜色和单位

    在css代码编写中,估计颜色和单位是必不可少的,然而在css中关于颜色和单位值的写法有很多种写法,所以有必要把它弄清楚. 颜色 当初我在初学前端的时候,就会冒出一个疑问“我该如何设置网页颜色?”,一般 ...

  6. 前端css常用的选择小汇

    要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器.选择器就是选择器用来指定样式的作用范围. 类选择器: 类选择器在css中比较常见,首先要在普通标签中设置 ...

  7. css常用属性汇总

    一.常用css属性 (1) *block(区块) 行高 line-height:数值 | inherit | normal; 字间距 letter-spacing: 数值 | inherit | no ...

  8. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  9. css常用属性1

    1  背景相关 背景颜色 background-color     = 颜色名称/rgb值/十六进制值 背景图片 background-image = url('') 背景图片平铺方式 backgro ...

  10. css常用属性总结：关于word-spacing和letter-spacing的使用

    前端时间项目版本迭代,修改代码时发现使用了关于word-spacing和letter-spacing.先说下使用场景,以前的项目中,经常遇到某些字符间有一些间距,我看了一些同事的代码是这么实现的: & ...

随机推荐

  1. OsharpNS轻量级.net core快速开发框架简明入门教程-多上下文配置(多个数据库的使用)

    OsharpNS轻量级.net core快速开发框架简明入门教程 教程目录 从零开始启动Osharp 1.1. 使用OsharpNS项目模板创建项目 1.2. 配置数据库连接串并启动项目 1.3. O ...

  2. 别傻傻不知道 == 和 equals 的区别【面试系列】

    ​ 关于这个问题,一般初中级面试中都会遇到,还记得我当初实习找工作的时候也遇到了这个问题,现在都还记得自己是怎么回答的:== 是基本类型比较,equals 是对象比较,不懂 hashCode,想起来简 ...

  3. 第23课 优先选用make系列函数

    一. make系列函数 (一)三个make函数 1. std::make_shared:用于创建shared_ptr.GCC编译器中,其内部是通过调用std::allocate_shared来实现的. ...

  4. jenkins 更新插件使用代理

    方法一: 管理插件页面配置如下: 这个 URL 改成http://mirror.xmission.com/jenkins/updates/update-center.json 或https://mir ...

  5. linux中断子系统

    参考引用:http://www.wowotech.net/sort/irq_subsystem wowotech:一个很好的linux技术博客. 一.概述 目的 kernel管理硬件设备的方式:轮询. ...

  6. Installing Google Chrome in Linux(RedHat Enterprise Linux 7)

    # wget https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm # yum -y install r ...

  7. [转帖]PG的时间函数使用整理如下

    PG的时间函数使用整理如下 https://blog.csdn.net/dahuzix/article/details/48576945 1.获取系统时间函数 -- :: -- :: -- :: 2. ...

  8. scala中分组的算子的用法

    val rdd= sc.parallelize(List(("tom",1),("jerry",3),("kitty",2),(" ...

  9. docker安装mysql8

    docker run --restart=always -d -v /opt/data/conf.d/:/etc/mysql/conf.d/ -v /opt/data/mysql/:/var/lib/ ...

  10. windows系统mysql-5.7官方绿色版zip包安装教程

    准备 下载页面:https://dev.mysql.com/downloads/mysql/ 点击 Download 按钮下载zip包到本地,解压(以我本地的解压路径是 D:\db\mysql-5.7 ...