CSS(1)
使用CSS的注意点:
1.style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系)。
2.style标签中的type属性其实可以不用写,默认就是type="text/css"。
3.设置样式时必须按照固定的格式来设置,key :value;其中:不能省略,分号大多数情况下也不能省略。 
文字属性:
- 规定文字样式的属性
格式:font-style:italic; 取值:normal--正常的,默认是正常的 italic--倾斜的
快捷键:fs font-style:italic; fsn font-style: normal; - 规定文字粗细的属性
格式: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; - 规定文字字体的属性
格式: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必须写在所有属性的最后。
文本属性
- 文本装饰的属性
格式:text-decoration:underline;取值:underline 下划线、 line-through 删除线、overline 上划线、去掉超链接的下划线 - 文本水平对齐的属性
格式:text-align:left;取值:left 左、right 右、center 中 - 文本缩进的属性
格式:text-indent:2em;取值:2em,其中em是单位,一个em代表缩进一个文字的宽度
颜色属性
- 文本装饰的属性
格式: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)的更多相关文章
- 前端学习 第五弹: CSS (一)
前端学习 第五弹: CSS (一) 创建css: <link rel="stylesheet" type="text/css" href="my ...
- CSS——(2)与标准流盒模型
部分博客<CSS--(1)基础>中简介了CSS的概念和几种用法,如今主要是介绍其的核心内容. 盒子模型 为了理解盒子模型,我们能够先从生活中的盒子入手.盒子是用来放置物品的,内部除了有物品 ...
- 前端总结·基础篇·CSS(一)布局
目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...
- 前端总结·基础篇·CSS(二)视觉
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...
- 前端总结·基础篇·CSS(三)补充
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...
- CSS(一) 引入方式 选择器 权重
Css(一) Cascading Style Sheet 层叠样式表 css注释方式/* */ 一.Css引入方式 1. 行间样式 style=" key:value; " &l ...
- CSS(选择器)
CSS(选择器) 作用:用于匹配 HTML 元素 选择器分类: 1.元素选择器 a{} 2.伪元素选择器 ::before{} (真实存在的元素) 3.类选择器 .link{} 4.属性选择 ...
- CSS——(2)盒子模型与标准流
上篇博客<CSS--(1)基础>中简单介绍了CSS的概念和几种使用方法,现在主要是介绍其的核心内容. 盒子模型 为了理解盒子模型,我们可以先从生活中的盒子入手.盒子是用来放置物品的,内部除 ...
- ASP.NET动态网站制作(3)--css(2)
前言:css分为四次课讲完,第一节课内容见ASP.NET动态网站制作(2)--css(1),接下来的内容会涉及到定位.浮动.盒子模型(第二次课).css的具体应用(第三次课).css3(第四次课).今 ...
- css(一)
CSS CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 一 css的四种引入方式 1.行内式 ...
随机推荐
- HashMap的put()与扩容
1. put() final V putVal(int hash, K key, V value, boolean onlyIfAbsent, boolean evict) { HashMap.Nod ...
- linux maven 安装与配置
Apache Maven,是一个软件(特别是Java软件)项目管理及自动构建工具,由Apache软件基金会所提供.基于项目对象模型(缩写:POM)概念,Maven利用一个中央信息片断能管理一个项目的构 ...
- Python——Python安装
下载地址:https://www.python.org/downloads/windows/ 3.X安装方法: 1. 设置一个自选路径,并将下面的选项打钩.(建议使用根目录) 2. 应用在所有用户中 ...
- CentOS7搭建git服务器
在CentOS7上搭建git服务器, 1.在Linux上安装git yum install -y git 验证是否安装成功,出现版本号即成功 git --version 2.创建版本库和用户 创建用户 ...
- c# Unicode
- python面试总结3(性能分析优化,GIl常考题)
python性能分析和优化,GIL常考题 什么是Cpython GIL Cpython解释器的内存管理并不是线程安全的 保护多线程情况下对python对象访问 Cpython使用简单的锁机制避免多个线 ...
- fontawesome-iconpicker 自定义字体图标选择器
官网地址:https://farbelous.io/fontawesome-iconpicker/ 头部文件引入 <!--本地地址--> <link href="../cs ...
- centos7误删除python2.7导致的python和yum不可用处理
centos7误删除python2.7后导致yum不可用: 问题截图 解决方法: 1.在opt目录下创建site_package/python3递归目录,然后下载以下RPM包,并存入/opt/site ...
- wireshark 抓包再利用TCP socket发送包里的payload是可以实现登陆的
用户密码可被批量破解 在用户使用手机端登录时,对数据进行抓包分析. 多次抓包分析后,可得到几个关键TCP数据包. 根据前面逆向编写出的解密算法,使用socket进行数据发包测试: 可以模拟APK进行用 ...
- 《奋斗吧!菜鸟》第九次团队作业:Beta冲刺
项目 内容 这个作业属于哪个课程 任课教师链接 作业要求 https://www.cnblogs.com/nwnu-daizh/p/11056511.html 团队名称 奋斗吧!菜鸟 作业学习目标 B ...