使用CSS的注意点:
1.style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系)。

2.style标签中的type属性其实可以不用写,默认就是type="text/css"。

3.设置样式时必须按照固定的格式来设置,key :value;其中:不能省略,分号大多数情况下也不能省略。

文字属性:

  1. 规定文字样式的属性
    格式:font-style:italic; 取值:normal--正常的,默认是正常的 italic--倾斜的
    快捷键:fs font-style:italic; fsn font-style: normal;
  2. 规定文字粗细的属性
    格式:font-weight:bold;
    单词取值:bold 加粗 、bolder 比加粗还要粗 、lighter 细线,默认就是细线
    快捷键:fwb font-weight:bold;
    数字取值:100-900整百的数字,700对应的是bold的级别
    3.规定文字字体的属性
    格式:font-size:30px;
    单位:px(像素 pixel)
    注意点:通过font-size设置大小时,必须带上px单位
    快捷键:fs30 font-size:30px;
  3. 规定文字字体的属性
    格式:font-family:"楷体";
    注意点:
    1)如果取值是中文,需要用双引号或者单引号括起来
    2)设置的字体必须是用户电脑里面已经安装的字体(如果设置的字体不存在,则会使用默认的字体来显示)

    3)如果想给中文和英文分别单独设置字体,该怎么办?
    但凡是中文字体,里面都包含了英文,但凡是英文字体,里面都没有包含中文。也就是说中文字体可以处理英文,而英文字体不能处理中文。如果想给界面中的英文单独设置字体,那么英文的字体必须写在中文的前面。
    快捷键:ff font-family:;
    5.文字属性的简写
    格式:font:style weight size family
    注意点:
    1)在这种缩写格式中有点属性值可以省略,style、weight可以省略。
    2)在这种缩写格式中style和weight的位置可以交换。
    3)在这种缩写格式中有点属性是不可以省略的,size、family是不可以省略的。
    4)size和family的位置是不能随便乱放的,size一定要在family的前面,而且size和family必须写在所有属性的最后。

文本属性

  1. 文本装饰的属性
    格式:text-decoration:underline;取值:underline 下划线、 line-through 删除线、overline 上划线、去掉超链接的下划线
  2. 文本水平对齐的属性
    格式:text-align:left;取值:left 左、right 右、center 中
  3. 文本缩进的属性
    格式:text-indent:2em;取值:2em,其中em是单位,一个em代表缩进一个文字的宽度

颜色属性

  1. 文本装饰的属性
    格式:color:值;
    取值:1)英文单词:常见的颜色都有对应的英文单词,但是不是所有颜色都能用英文单词来表达,是有限制的。
    2)rgb,其实就是三原色,r(red)、g(green)、b(blue),格式:rgb(0,0,0)
    常见颜色:红色:rgb(255,0,0) 绿色:rgb(0,255,0) 蓝色:rgb(0,0,255) 黑色:rgb(0,0,0) 白色:rgb(255,255,255)
    注意:在前端开发中其实不常用黑色,只要让红色、绿色、蓝色的值都一样就是灰色,而且如果这三个值越小那么就越偏黑色,越大就越偏白色。
    3)rgba,与rgb差不多一样,多出来的a代表透明度,取值是0到1,取值越小就越透明
    4)十六进制,其实本质就是RGB十六进制中是通过每两位表示一个颜色,例如:#FFEE00 FF表示R EE表示G 00表示B

<wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style="display: none;">

 
 
 
 

CSS(1)的更多相关文章

  1. 前端学习 第五弹: CSS (一)

    前端学习 第五弹: CSS (一) 创建css: <link rel="stylesheet" type="text/css" href="my ...

  2. CSS——(2)与标准流盒模型

    部分博客<CSS--(1)基础>中简介了CSS的概念和几种用法,如今主要是介绍其的核心内容. 盒子模型 为了理解盒子模型,我们能够先从生活中的盒子入手.盒子是用来放置物品的,内部除了有物品 ...

  3. 前端总结·基础篇·CSS(一)布局

    目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...

  4. 前端总结·基础篇·CSS(二)视觉

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...

  5. 前端总结·基础篇·CSS(三)补充

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...

  6. CSS(一) 引入方式 选择器 权重

    Css(一) Cascading Style Sheet 层叠样式表 css注释方式/*  */ 一.Css引入方式 1. 行间样式 style=" key:value; " &l ...

  7. CSS(选择器)

    CSS(选择器) 作用:用于匹配 HTML 元素 选择器分类: 1.元素选择器  a{} 2.伪元素选择器  ::before{}  (真实存在的元素) 3.类选择器   .link{} 4.属性选择 ...

  8. CSS——(2)盒子模型与标准流

    上篇博客<CSS--(1)基础>中简单介绍了CSS的概念和几种使用方法,现在主要是介绍其的核心内容. 盒子模型 为了理解盒子模型,我们可以先从生活中的盒子入手.盒子是用来放置物品的,内部除 ...

  9. ASP.NET动态网站制作(3)--css(2)

    前言:css分为四次课讲完,第一节课内容见ASP.NET动态网站制作(2)--css(1),接下来的内容会涉及到定位.浮动.盒子模型(第二次课).css的具体应用(第三次课).css3(第四次课).今 ...

  10. css(一)

    CSS CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 一 css的四种引入方式 1.行内式          ...

随机推荐

  1. AIR面向IOS设备的原生扩展

    来源:http://www.cnblogs.com/alex-tech/archive/2012/03/22/2411264.html ANE组成部分 在IOS平台中,ANE的组成部分基本分为AS 3 ...

  2. Java8 stream用法-备忘录

    1. 如何使用匹配模式 List<String> strs = Arrays.asList("a", "a", "a", &qu ...

  3. IAR使用ST-Link下载仿真

    修改Debugger->Setup->Driver 选择ST-LINK 修改 ST-LINK ->Interface选择SWD,CPU clock配置单片机CPU系统时钟. 修改De ...

  4. SOAP知识点

    SOAP简介: SOAP 是基于 XML 的简易协议,可使应用程序在 HTTP 之上进行信息交换. 或者更简单地说:SOAP 是用于访问网络服务的协议. 1.什么是 SOAP? SOAP 指简易对象访 ...

  5. python中的嵌套类

    python中的嵌套类 在.NET和JAVA语言中看到过嵌套类的实现,作为外部类一个局部工具还是很有用的,今天在python也看到了很不错支持一下.动态语言中很好的嵌套类的实现,应该说嵌套类解决设计问 ...

  6. SVM: 相对于logistic regression而言SVM的 cost function与hypothesis

    很多学习算法的性能都差不多,关键不是使用哪种学习算法,而是你能得到多少数据量和应用这些学习算法的技巧(如选择什么特征向量,如何选择正则化参数等) SVM在解决非线性问题上提供了强大的方法. logis ...

  7. 创建型模式(过渡模式) 简单工厂模式(Simple Factory)

    简单工厂模式(Simple Factory Pattern)属于类的创建型模式,又叫静态工厂方法模式(Static FactoryMethod Pattern) 是通过专门定义一个类来负责创建其他类的 ...

  8. json格式常用操作

    var data={"student":[ {"name":"zhangsan","age":11}, {"n ...

  9. module method

    null 参考链接: https://www.cnblogs.com/lvdabao/p/5953884.html

  10. drf框架 - 解析模块 | 异常模块 | 响应模块

    解析模块 为什么要配置解析模块 1)drf给我们提供了多种解析数据包方式的解析类 2)我们可以通过配置,来控制前台提交的哪些格式的数据后台在解析,哪些数据不解析 3)全局配置就是针对每一个视图类,局部 ...