初窥css---包含一些概念和一些文字样式
初窥css
CSS相关概念
全称是层叠式样式表。规定了html在网页上的显示样式。我们都知道css主要是负责装饰页面的,但是其实在HTML4之前,网页的样式与架构全部都是写在一起的,也是在HTML4之后w3c组织决定将样式与结构分开的。
前端三层(感觉名字好像一本秘籍,哈哈)
html:结构层,搭建网页的整体架构
css: 样式层,装饰页面。
JavaScript:行为层,一些页面交互效果。
作用细化
1.给文本添加文字显示样式
2.给盒子添加属性进行结构布局
css书写位置
根据书写css属性位置不同分为
行内式,内嵌式,外链式
使用
学习过程中多用内嵌式
工作的话多用外链式
看别人网页时的一些模块名称
注意事项
1.css的k和v写法:k:v
2.多个属性之间必须用;分割
3.对于换行,缩进等不敏感
4.设置字体时请将英文字体写到中文字体前面。
font属性用来控制大多数字体的样式,它本身是复合属性(可以用-连接单一属性名)
---------------------------------------------------------------------------------------------------------------
小知识点
常用字体:
备用字体
有时候为了页面更加美观,有些程序员就会使用一些比较奇怪的字体,但是刚好用户电脑上没有这个字体,这个时候就需要备用字体了,下面代码中我会写到用法
小练习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>初学css</title>
<style>
div{
width: 300px;
/*这里把盒子宽度设置为300像素*/
font-size:300px ;
/*这里把字体大小设置为300像素*/
color: pink;
/*字体颜色为粉色*/
font-family: "Arial","微软雅黑","宋体";
/*这里将英文字体设为Arial,中文字体为微软雅黑,中文备用字体为宋体*/
background-color: deepskyblue;
/*这里将盒子背景颜色设置为深天蓝色*/
border: yellow solid;
/*将边框的颜色设为黄色,边框为实线*/
}
</style>
</head>
<body>
<div >
<p>我真的是汪星人</p>
</div>
</body>
</html>
小练习(关于文本样式)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
css初学
</title>
<style>
*{
margin: 0;
padding: 0;
}
p,div{
color:deepskyblue;
font-size: 20px;
font-family: "Arial","楷体";
}
div{
width: 400px;
border: solid yellow;
}
.hangGao{
line-height: 70px;
}
.jiaCu{
font-weight: 900;
}
.ziTiFengGe{
font-style: italic;
}
.heZiheZi p{
text-align: center;
text-indent: 2em;
text-decoration: line-through;
}
.wenBenXiuShi{
text-decoration: underline;
}
</style>
</head>
<body>
<p class="hangGao">行高------line-height</p>
<p class="jiaCu">加粗------font-weight</p>
<p class="ziTiFengGe">字体风格----------font-style</p>
<div class="heZiheZi">
文本对齐+文本缩进
<p><<减字木兰决>></p><p>
“烛花摇影,冷透疏衾刚欲醒。”开篇即是烛影摇曳、似梦还醒
的迷茫凄冷景象。 “烛花摇影”是一个很典型的诗词意象。宋代
词人方千里《还京乐》中有句“怅画烛摇影,易积银盘红泪”,
这是繁丽绮艳的花间风格。宋人洪咨夔《浣溪沙》也有句: “烛
摇斜吹泪空煎。”在纳兰词中,“灯”的意象多次出现。这大概是因
为“灯”在凄冷孤独之夜能给人带来温暖和光明,有一种安恬的家的氛围。
而孤独的人对青灯,则别有怀抱,心中有说不尽的万千思绪。事实上,纳
兰容若在前面的许多悼亡词中,都写到了一个生活细节:“半月前头扶病,
剪刀声、犹共银釭。”妻子去世前半个月,还扶病剪灯花,以致那剪刀声在纳兰
耳畔久久萦回。这个剪烛花的细节或许可以成为“烛花摇影”的解读契机。“冷透疏衾”
, “疏衾”是指因一个人孤身而眠而显得宽松疏阔的被衾。“冷透”二字自是人的主观感受,
因孤寂而生寒意。一个“透”字则说明心中悲凉至极。
</p>
</div>
<p class="wenBenXiuShi">文本修饰-----------text-decoration</p>
</body>
</html>
总结
本来是不准备发的,因为太过基础了,但还是希望有人看,哈哈。
初窥css---包含一些概念和一些文字样式的更多相关文章
- scrapy2_初窥Scrapy
递归知识:oop,xpath,jsp,items,pipline等专业网络知识,初级水平并不是很scrapy,可以从简单模块自己写. 初窥Scrapy Scrapy是一个为了爬取网站数据,提取结构性数 ...
- WWDC15 Session笔记 - Xcode 7 UI 测试初窥
https://onevcat.com/2015/09/ui-testing/ WWDC15 Session笔记 - Xcode 7 UI 测试初窥 Unit Test 在 iOS 开发中已经有足够多 ...
- 网页3D效果库Three.js初窥
网页3D效果库Three.js初窥 背景 一直想研究下web页面的3D效果,最后选择了一个比较的成熟的框架Three.js下手 ThreeJs官网 ThreeJs-github; 接下来我会陆续翻译 ...
- Scrapy 1.4 文档 01 初窥 Scrapy
初窥 Scrapy Scrapy 是用于抓取网站并提取结构化数据的应用程序框架,其应用非常广泛,如数据挖掘,信息处理或历史存档. 尽管 Scrapy 最初设计用于网络数据采集(web scraping ...
- python爬虫 scrapy2_初窥Scrapy
sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction.htm?courseId=1005269003&utm_campai ...
- 初窥Kaggle竞赛
初窥Kaggle竞赛 原文地址: https://www.dataquest.io/mission/74/getting-started-with-kaggle 1: Kaggle竞赛 我们接下来将要 ...
- iOS视频直播初窥:高仿<喵播APP>
视频直播初窥 视频直播,可以分为 采集,前处理,编码,传输, 服务器处理,解码,渲染 采集: iOS系统因为软硬件种类不多, 硬件适配性比较好, 所以比较简单. 而Android端市面上机型众多, 要 ...
- php面向对象(一) 初窥
初窥php面向对象 1.类:类就是属性和方法的集合 是一个抽象的概念比如生活中的“人”,"汽车"2.对象:对象是具体的事物 比如一叫“小强”的人 一辆叫“奥迪a7”的汽车3.类和对 ...
- 初窥Flask
初窥Flask Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收http请求并对请求 ...
随机推荐
- CenOS_文件目录类操作命令
1.pwd 基本语法: pwd (功能描述:显示当前工作目录的绝对路径) 2.ls 基本语法: ls [选项] [目录或是文件] 常用选项: -a :显示当前目录所有的文件和目录,包括隐藏的. -l ...
- 【English EMail】2019 Q2 Public Holiday Announcement
Hi all, According to 2019 public holiday announcement released by Chinese government, this is to ann ...
- Linux:Day20(下) http基础
Web Service Port number: 0-1023:众所周知,永久的分配给固定的应用使用,22/tcp(ssh),80/tcp(http),443/tcp(https) 1024-4195 ...
- 判断JS数据类型的四种方法
在 ECMAScript 规范中,共定义了 7 种数据类型,分为 基本类型 和 引用类型 两大类,如下所示: 基本类型:String.Number.Boolean.Symbol.Undefined.N ...
- 第3章 简单的C程序设计——顺序程序设计
3.1 顺序程序设计举例 例:有人用温度计测量出用华氏法表示的温度(如64F),今要求把它转换为一摄氏法表示的温度(如17.8C) 解题思路:问题的关键在于找到两者的转换公式.根据物理学知识,公式为c ...
- 死磕 java集合之HashSet源码分析
问题 (1)集合(Collection)和集合(Set)有什么区别? (2)HashSet怎么保证添加元素不重复? (3)HashSet是否允许null元素? (4)HashSet是有序的吗? (5) ...
- UmengAppDemo【友盟统计SDK集成以及多渠道打包配置,基于V7.5.3版本】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 这里只是记录下集成友盟统计SDK以及简单配置多渠道打包的步骤.所以1.该Demo不能运行:2.配置多渠道打包只是一种简单的写法,具体 ...
- Redis缓存你必须了解的!
不管你是从事Python.Java.Go.PHP.Ruby等等… Redis都应该是一个比较熟悉的中间件.而大部分经常写业务代码的程序员,实际工作中或许只用到了set value.get value两 ...
- 前端笔记之JavaScript面向对象(四)组件化开发&轮播图|俄罗斯方块实战
一.组件化开发 1.1组件化概述 页面特效的制作,特别需要HTML.CSS有固定的布局,所以说现在越来越流行组件开发的模式,就是用JS写一个类,当你实例化这个类的时候,页面上的效果布局也能自动完成. ...
- idea avtiviti 插件中文乱码
idea 安转activiti插件后,编辑流程图发现保存后中文乱码,并且idea的字符集(Settings—>Editor—>File Encodings)已经设置为UTF-8,流程图中中 ...