Html和Css学习笔记-css基础知识
此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签,元素,属性的具体意义。
这里所介绍的html和css的版本为html5与css3
Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言
Css是层叠样式表(英文全称:Cascading Style Sheets)是一种用来html和xml等文件样式的计算机语言,CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
Html与css文件验证工具的地址:http://validator.w3.org/
一.在html页面中使用css定义样式
方法1,在页面中写入css样式信息
<style>标签用于为HTML文档定义样式信息
style元素规定在浏览器中如何呈现HTML文档。
type属性是必需的,定义 style 元素的内容为 "text/css"。
<style>元素应位于head部分中
在<style>元素中加入body{xxxxxx},用于规定括号内的所有css样式要应用于html<body>元素中的内容,xxxx的内容使用css定义页面的大小,边距,字体,颜色等
例如:
<html>
<head>
<title>xxxxxxxx</title>
<style type="text/css">
body{
background-color: #d2b48c:
margin-left: %20;
margin-right: %20;
border: 2px dotted black;
padding: 10px 10px 10px 10px
font-family:sans-seif;
}
</style>
</head> <body>
<h1>xxxxxxxxx</h1>
<h2>xxxxxxxxxx</h2>
<p>xxxxxxxxxxxx</p>
</body>
</html>
方法2,在html文件中引入外部css样式文件(建议使用此方法)
将html文件中的<style>标签删除,在原位置改写为如下代码:
<link type="text/css" rel="stylesheet" href="xxxx.css">
link元素用于链接外部信息,他是一个void元素
type属性是必需的,定义 style 元素的内容为 "text/css"
rel属性指定了html文件与所连接文件的关系,这里要链接一个样式表所以使用值“stylesheet”
href指定样式表的位置可以使路径或url
二.css文件的书写方法
在css文件中使用如下结构书写
1.为单个元素编写规则
元素(这里不需要加<>符号) {
属性:参数;
属性:参数;
属性:参数;
属性:参数;
}
2.为多个元素编写规则
元素,元素(这里不需要加<>符号) {
属性:参数;
属性:参数;
属性:参数;
属性:参数;
}
三.css的一些可用属性
css文件中注释的写法:/*xxxxxx*/
background-color:xxx;设置背景颜色
border:xpx(边框的宽度) solid(实虚线) gray(颜色);设置一个边框
border-bottom:xpx(边框的宽度) solid(实虚线) gray(颜色);设置下边框的外观
color:设置字体颜色,这里可以设置为颜色代码
font-weight:这个属性控制文本的粗细,参数有bold(粗体),normal(去掉粗体样式)oblique(倾斜文本)
font-style:这个属性设置斜体文字,参数有:italic
letter-spacing:在字母之间设置间距
top:控制元素顶部的位置
left:这个属性指定元素的左边所在位置
text-align使用这个元素将文本左对齐,居中或右对齐
text-decoration:对文本进行装饰,例如加入上划线(overline),下划线(underline),删除线(line-through)
line-height:这个属性设置一个文本元素中的行间距
background-image:这个属性在元素后面放置一个图像
四.html和css中类的概念
1.怎样设置一个类
(1)在html中加入以下参数
<元素 class="xxxx(类的名字)">
(2)在css设置如下参数
第一种:
元素.类的名字{
属性:参数;
属性:参数;
}
这只会选择类的名字所对应的元素
第二种:
.类的名字{
属性:参数;
属性:参数;
}
这会选择使用该类的名字中的所有元素
(3)单个元素可以加入多个类,写法如下
<元素 class="类的名字 类的名字 类的名字 ">
同一选择器下的其他元素如果没有特定元素会某人继承父元素的样式,有特定元素则使用特定元素,同一特定元素不同选择器的情况下,以css文件中最靠后的选择器的样式为准。
五.字体相关设置
1.使用font-family属性设置本地字体及网络字体
(1)使用本地字体,例子:
某元素(
font-family:字体名字,字体名字,字体名字"
)
其中可以设置为一个字体或多个字体,但多个字体要用逗号隔开
(2)使用网络字体
@font-face {
font-family:"字体名字"
src:url("字体的url"),
url("字体的url"); 元素{
font-family:”上面设置的字体名字“;
}
2.使用font-size属性设置字体大小
字体大小设置的三种表示方法:1.关键字 2.em 3.百分数
常用方法:
1.选择一个关键字,指定它为body规则中的字体大小,这相当于页面字体大小
2.使用em或百分数,相对于body字体的大小指定其他元素的字体大小
补充:其中所有属性值的关键字为:small,thin,medium,thick(每个浏览器对关键字的大小定义不一样)
六.颜色设置相关
颜色参数的书写方法有三种分别是:
1.直接设置颜色对应的英文单词
2.使用rgb参数(具体数值去颜色工具上面查找)
例如
rgb(123,123,213)
或
rgb(10%,123%,123%)
3.使用十六进制码表示颜色(具体数值去颜色工具上面查找)
例如
#cc600
Html和Css学习笔记-css基础知识的更多相关文章
- Html和Css学习笔记-html基础知识
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...
- MyBatis:学习笔记(1)——基础知识
MyBatis:学习笔记(1)--基础知识 引入MyBatis JDBC编程的问题及解决设想 ☐ 数据库连接使用时创建,不使用时就释放,频繁开启和关闭,造成数据库资源浪费,影响数据库性能. ☐ 使用数 ...
- C#学习笔记(基础知识回顾)之值类型与引用类型转换(装箱和拆箱)
一:值类型和引用类型的含义参考前一篇文章 C#学习笔记(基础知识回顾)之值类型和引用类型 1.1,C#数据类型分为在栈上分配内存的值类型和在托管堆上分配内存的引用类型.如果int只不过是栈上的一个4字 ...
- C#学习笔记(基础知识回顾)之值传递和引用传递
一:要了解值传递和引用传递,先要知道这两种类型含义,可以参考上一篇 C#学习笔记(基础知识回顾)之值类型和引用类型 二:给方法传递参数分为值传递和引用传递. 2.1在变量通过引用传递给方法时,被调用的 ...
- C#学习笔记(基础知识回顾)之值类型和引用类型
一:C#把数据类型分为值类型和引用类型 1.1:从概念上来看,其区别是值类型直接存储值,而引用类型存储对值的引用. 1.2:这两种类型在内存的不同地方,值类型存储在堆栈中,而引用类型存储在托管对上.存 ...
- Quartz学习笔记:基础知识
Quartz学习笔记:基础知识 引入Quartz 关于任务调度 关于任务调度,Java.util.Timer是最简单的一种实现任务调度的方法,简单的使用如下: import java.util.Tim ...
- CSS学习笔记(基础部分)
一.CSS 简介: CSS 指层叠样式表 (Cascading Style Sheets),用来设置HTML的格式. 语法:选择器 {属性:值;属性:值} 注释://注释内容 /*注释内容*/ 二.C ...
- .net学习笔记---xml基础知识
一.XML简介 XML是一种标记语言,用于描述数据,它提供一种标准化的方式来来表示文本数据.XML文档以.xml为后缀.需要彻底注意的是XML是区分大小写的. 先从一个简单的XML例子来了解下xml基 ...
- Html和Css学习笔记-css进阶-盒模型
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...
- Docker的学习笔记(一)基础知识
概述 本人最近在学习docker相关的知识,既是工作本身的需要也是自己对技术的追求的必要,以后我也会推出容器相关的随笔,既可以增长自己的知识,也可以和读者广泛交流,岂不乐乎?话不多说.第一篇先介绍do ...
随机推荐
- For each...in / For...in / For...of 的解释与例子
1.For each...in for each...in 语句在对象属性的所有值上迭代指定的变量.对于每个不同的属性,执行一个指定的语句. 语法: for each (variable in obj ...
- Spring使用支付宝扫码支付
前一段一直在研究支付宝的扫码支付,不得不说,支付宝的文档写的真是一个烂(起码在下刚开始看的时候是mengbi的).文档上面的示例和demo里面的示例长的完全不一样.往往文档上面的例子很简单,而demo ...
- [Swift]LeetCode263. 丑数 | Ugly Number
Write a program to check whether a given number is an ugly number. Ugly numbers are positive numbers ...
- [Swift]LeetCode441. 排列硬币 | Arranging Coins
You have a total of n coins that you want to form in a staircase shape, where every k-th row must ha ...
- Ubuntu12.04中的虚拟机安装Ubuntu16.04,并实现远程控制16.04
目录 1.设置网络连接 1.1 VMware虚拟机网络地址设置 1.2 设置虚拟机内Ubuntu16.04的网络模式 未开机状态下 开机状态下 1.3 查看虚拟机中Ubuntu16.04的IP 2.进 ...
- Ubuntu12.04下安装NS3.25
实验室项目的需求,要使用到NS3做仿真,使用实验室的电脑,Ubuntu12.04,版本比较低,建议大家使用16.04,这样安装依赖文件时不会出现版本过低的问题 (没管最后也安装成功了).下面就安装步骤 ...
- .NET Core实战项目之CMS 第十章 设计篇-系统开发框架设计
这两天比较忙,周末也在加班,所以更新的就慢了一点,不过没关系,今天我们就进行千呼万唤的系统开发框架的设计.不知道上篇关于架构设计的文章大家有没有阅读,如果阅读后相信一定对架构设计有了更近一部的理解,如 ...
- 1K star+ 的项目是如何炼成的?
前言 首先标题党一下,其实这篇文章主要是记录我的第二个过 1K star 的项目 Java-Interview,顺便分享下其中的过程及经验. 需求选择 Java-Interview 之所以要做这个项目 ...
- OAuth 2.0 授权码请求
关于OAuth 2.0,请参见下面这两篇文章(墙裂推荐): <OAuth 2.0> <Spring Security OAuth 2.0> 纸上得来终觉浅,绝知此事要躬行.理论 ...
- redis 系列7 数据结构之跳跃表
一.概述 跳跃表(skiplist)是一种有序数据结构,它通过在每个节点中维持多个指向其他节点的指针,从而达到快速访问节点的目的.在大部分情况下,跳跃表的效率可以和平衡树(关系型数据库的索引就是平衡树 ...