使用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. VMware下载及安装(含破解码)永久使用

    VMware(纽约证交所代码:VMW)在虚拟化和云计算基础架构领域处于全球领先地位,所提供的经客户验证的解决方案可通过降低复杂性以及更灵活.敏捷地交付服务来提高IT效率.VMware使企业可以采用能够 ...

  2. saleae逻辑分析仪-串口

    安装软件 下载:https://www.saleae.com 连线 逻辑分析仪CHx分别连接UART的rx和tx 配置Logic 选择串口 设置波特率 还可以自定义显示方式 打开串口助手 波特率和Lo ...

  3. 【hadoop】看懂WordCount例子

    前言:今天刚开始看到map和reduce类里面的内容时,说实话一片迷茫,who are you?,最后实在没办法,上B站看别人的解说视频,再加上自己去网上查java的包的解释,终于把WordCount ...

  4. 【zookeeper】linux中编写脚本批量启动zookeeper

    实现功能:一键启动.关闭主从端3个节点上的zookeeper,附加查看启动状态 mkdir bin --新建文件夹 cd bin 跳转到bin文件夹里 touch zookeeperstart.sh ...

  5. mysql 优化修复表

    OPTIMIZE TABLE `table_name` 优化表 MyISAM 引擎清理碎片 OPTIMIZE语法: OPTIMIZE [LOCAL | NO_WRITE_TO_BINLOG] TABL ...

  6. 【转】高性能网络编程2----TCP消息的发送

    在上一篇中,我们已经建立好的TCP连接,对应着操作系统分配的1个套接字.操作TCP协议发送数据时,面对的是数据流.通常调用诸如send或者write方法来发送数据到另一台主机,那么,调用这样的方法时, ...

  7. 使用Cloudera Manager搭建YARN集群及YARN HA

    使用Cloudera Manager搭建YARN集群及YARN HA 作者:尹正杰  版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.使用Cloudera Manager搭建YARN集群 1& ...

  8. ealsticsearch历史版本下载

    ealsticsearch历史版本下载 https://www.elastic.co/cn/downloads/past-releases#elasticsearch

  9. 《The One!团队》第八次作业:ALPHA冲刺(五)

    项目 内容 作业所属课程 所属课程 作业要求 作业要求 团队名称 < The One !> 作业学习目标 (1)掌握软件测试基础技术.(2)学习迭代式增量软件开发过程(Scrum) 第五天 ...

  10. 正确理解cookie和session机制原理

    php中cookie和session是我们常用的两个变量了,一个是用户客户端的,一个用在服务器的但他们的区别与工作原理怎么样,下面我们一起来看看cookie和session机制原理吧. cookie和 ...