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. vue 学习记录

    模板:通常是指html模板 组件component的概念: 在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例, 将组件看作自定义的HTML元素.使用组件的前提是创建并注册组件 v ...

  2. flutter RN taro选型思考

    当前RN已经成熟,但是依赖于大平台(JD.携程),小公司想开箱即用还是有困难的 纯Flutter还远未成熟,更多的是和原生进行混合 但是作为个体又想要在某一个点切入市场,就是需要作选择,基于当下及未来 ...

  3. There is no getter for property named 'id' in 'class java.lang.Integer

    There is no getter for property named 'id' in 'class java.lang.Integer 问题描述: 使用mybatis传入参数, 当参数类型是St ...

  4. 2017 ACM/ICPC Asia Regional Shenyang Online E number number number 题解

    分析: 当n=1时ans=4=f(5)-1; n=2,ans=12=f(7)-1; n=3,ans=33=f(9)-1; 于是大胆猜想ans=f(2*k+3)-1. 之后用矩阵快速幂求解f(n)即可, ...

  5. ACM 常用 OJ 网址

    ACM 常用 OJ 网址 浙江大学: https://pintia.cn/ 北京大学: http://poj.org/ 杭州电子科技大学: http://acm.hdu.edu.cn/ 中国科技大学: ...

  6. Mysql系列（十一）—— 性能分析慢查询日志

    转载自:http://www.cnblogs.com/kerrycode/p/5593204.html 慢查询日志概念 MySQL的慢查询日志是MySQL提供的一种日志记录,它用来记录在MySQL中响 ...

  7. 记一个netcore HttpClient的坑

    异常信息 The SSL connection could not be established, see inner exception ---> AuthenticationExceptio ...

  8. 练手WPF（一）——模拟时钟与数字时钟的制作（上）

    一.Visual Studio创建一个WPF项目. 简单调整一下MainWindow.xaml文件.主要使用了两个Canvas控件,分别用于显示模拟和数字时钟,命名为AnalogCanvas.digi ...

  9. 给定制的vuejs组件添加v-model双向绑定支持

    用过vuejs的前端工程师,对于v-model一定印象深刻.它向类似textarea,input等原生html原生添加双向数据绑定的能力非常方便.但是对于你的定制vue组件并不是能够直接应用v-mod ...

  10. Python 查看模块的帮助文档，方法和帮助信息

    参考链接:https://blog.csdn.net/u013810296/article/details/55509284 这里介绍下python自带的查看帮助功能,可以在编程时不中断地迅速找到所需 ...