使用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. RedisCluster的rename机制失败报错,解决又是数据倾斜问题

    需求说明:spring session中的用户session更新是更新key的名字,所以对于key的操作时需要用newkey 替换oldkey value值只允许存在一个,这里用到rename就很合适 ...

  2. 编写订单支付api中遇到的问题

    首先我是按照已经有的已经有的支付api去编写订单支付api,但是由于两者是有区别的,所以类似去搬用难免会出问题,首先我是套用已经写好的model,然后写相应的serializer,实现序列化之后就开始 ...

  3. trap - 在脚本中处理信号

    一:用途说明 trap命令是shell内建的命令,它用在脚本中指定信号如何处理.  比如,按Ctrl+C会使脚本终止执行,实际上系统发送了SIGINT信号给脚本进程,SIGINT信号的默认处理方式就是 ...

  4. 【Java】深拷贝和浅拷贝

    Java中的对象拷贝(Object Copy)指的是将一个对象的所有属性(成员变量)拷贝到另一个有着相同类类型的对象中去.举例说明:比如,对象A和对象B都属于类S,具有属性a和b.那么对对象A进行拷贝 ...

  5. phpcms站点部署

    1 wamp部署使用wamp2.4以下版本. 2.4版本自带的php5.4以上底层变化,phpcms运行不了. 2.2版自带的php5.3.10可以兼容. 2 安装配置时,尽量为每个站点配置(http ...

  6. 火狐谷歌webdriver驱动地址

    ChormeDrive下载 打开百度搜索Chromedriver官网下载,点击进入这个页面,链接为:http://npm.taobao.org/mirrors/chromedriver/2.41/  ...

  7. 关于 or 判断都是Ture的问题

    问题: 1. ret1 = [1, 2, 3, 4] if 11 or 33 in ret1: print("ok") else: print("no") 2. ...

  8. centOS下实践查询版本/CPU/内存/硬盘容量等硬件信息

    更详细参考: https://blog.csdn.net/dream_broken/article/details/52883883 1.查看内存 DirectMap2M: 33544192 kB [ ...

  9. Centos 下 Apache 原生 Hbase + Phoenix 集群安装(转载)

    前置条件 各软件版本:hadoop-2.7.7.hbase-2.1.5 .jdk1.8.0_211.zookeeper-3.4.10.apache-phoenix-5.0.0-HBase-2.0-bi ...

  10. 定位的盒子叠放顺序z-index

    1.正常情况,按照顺序,最后的盒子在最上面,默认z-index为02.当使用z-index,数字越大,越优先显示在上面3.注意,只要定位的盒子才可以使用该方法 <body> <div ...