使用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. vue + element ui开发过程中需要注意的几个点

    1.实现动态的数据双向绑定 关键字[$set]在这个需求开发的过程中还遇到深度克隆的问题 2:form表单的动态字段验证 关键字[promise.all] 3:动态表单验证关键字[el-form-it ...

  2. Laravel5.6---从头做一个项目web

    简介:类似论坛的项目,纯web,响应式,主要包含登录注册.支付.评论.富文本.文章列.个人中心等 目录: 1.初始化项目 ======================================= ...

  3. pre-departure preparation-to chengdu or shenzhen

    编辑本文 (一)思想要点 1.行动改变自己,做自己的救世主. 2.成为一个技术大拿. 3.当生活吊打了你,不用悲伤,尽快反击(力所能及的做事),不要停歇,因为不能再给生活喘息的机会. 4.遇到什么问题 ...

  4. Python——循环语句

    while循环: 通常使用在当满足某一条件时进行的循环语句. 例如: while True: #当为True时进行循环,这个搭配就是死循环 print(1) while count < 10: ...

  5. Python_变量作用域

    1.变量作用域: def get_apple(name,*b): global totalCount totalCount=0 for num in b: print('............... ...

  6. typescript 接口

    接口:用来建立某种代码约定,使得其他开发者在调用某个方法或创建新的类时必须遵循接口所定义的代码约定   在js里面没有接口这个概念,在ts里面通过两个关键字来支撑接口这个特性   interface ...

  7. Nginx中获取真实ip地址

    location / { proxy_pass http://localhost; proxy_set_header Host $host; proxy_set_header X-Real-IP $r ...

  8. (java)Jsoup爬虫学习--获取网页所有的图片,链接和其他信息,并检查url和文本信息

    Jsoup爬虫学习--获取网页所有的图片,链接和其他信息,并检查url和文本信息 此例将页面图片和url全部输出,重点不太明确,可根据自己的需要输出和截取: import org.jsoup.Jsou ...

  9. Win10 系统 Mysql 安装

    对于本地开发环境,小型的 Mysql 比较适合本地学习. 本文环境 win10 + mysql8 1.下载 去 Mysql 官网下载安装包 - https://dev.mysql.com/downlo ...

  10. python同时取每个列表的第一个元素

    在实际爬虫开发中, 经常用到列表保存数据, 在使用这些数据的时候,需要要取每个列表里的第一个元素进行拼接. 就需要用到python的内置方法:“zip()" # 现在有3个列表:li_1, ...