CSS基础
认知
层叠样式表 cascading style sheets
写在哪？style标签中，style一般在head之内，title之下
怎么写？
<title>Document<title>
<style>
选择器(查找标签用的)
p{
color: red;
/* 属性名 属性值 分号 */
font-size: 30px;
backgroud-color:green;
width: 400px;
height: 400px;
}
</style>
<head>
<body>
<p>hello world</p>
</body>
</html>
css引入方式：
-
内嵌式，style里【小场景案例】
通常约定写在head中，如上示
-
外联式 单独的 .css 文件中【单独管理 多用于项目中】
需通过link标签在网页中引入
在html文件的title之下写
<link rel="stylesheet" href="./my.css">在同级目录的css文件中写
p{color: red;} -
行内式 写在标签的style属性中【配合JavaScript使用】
<div style="color: green; font-size: 30px">这是div标签</div>
基础选择器
标签选择器★
作用：通过标签名 找到页面中 所有这类标签 ，设置样式使其全部生效
类选择器 ★★
解决以上问题：通过类名找到页面中 所有带有这个类名的标签 ，
先定义，然后调用这个定义，谁想变就拿过来用
注意
-
所有标签都有class属性
-
类名可由数字、字母、下划线、中划线组成，但不能以数字或中划线开头
-
一个标签可有多个类名，类名间以空格隔开
<p class="turnRED turnSIZE">222</p> -
类名可重复，一个类选择器可以同时选中多个标签
id选择器
- 所有标签都有id属性
- 类似身份证号码，在一个页面中是唯一的、不可重复的
- 一个标签只能有一个id属性值
- 一个id选择器只能选中一个标签
通配符选择器
*{}
有多少选多少
开发中使用极少，极特殊情况下用到（如京东网页以此来去除默认的margin和padding属性）
字体、文本样式
字体
//大小font-size 取值数字+px
//粗细font-weight 正常normal&400；加粗bold&700
//样式font-style 控制是否倾斜
<style>
div{
font-style: italic;
}
</style>
<div>DIV文字</div>
//类型font-family 控制字体
-
无衬线字体sans-serif
笔画粗细均匀，首尾无装饰，黑体、Arial（网页）
-
衬线serif
不均，有装饰，宋体、TimesNew Roman（报刊书籍）
-
等宽字体monospace
每个字母宽度相等，Consolas、fira code（代码编写）
div{ font-family: 微软雅黑,黑体,sans-serif; /*如果用户未安装雅黑则按黑体显示，都未安装则按任意一种无衬线系列显示*/ }样式的层叠问题：给同一个标签设置了相同的属性，此时样式会覆盖，写在下面的生效。
<title>Document</title>
<style>
p{
font: italic 700 66px 宋体；
}
</style>
</head>
<body>
<p>111</p>
</body>
以上是 “复合属性” 的空格隔开写法
注意：
-
要么把单独的样式写在连写的下面，要么把单独的样式写在连写的里面，以上述代码块为例：
p{ font: italic 700 66px 宋体； font-style: normal; /*会把原本倾斜掰正*/ }
文本
-
p{ /*首行缩进两个字 单个默认16px*/ /*或 直接使用em*/ text-indent: 32px; /*①*/ text-indent: 2em； /*②*/ } -
h1{text-align: center ;
}center能让哪些元素水平居中？文本//span标签、a标签//input标签、img标签
-
text-decoration: underline属性值 效果 underline 下划线 line-through 删除线（不常用） overline 刷新（不常用） none 无装饰线 
line-height行高
控制一行的上下行间距，取值数字+px，或倍数
p { line-height: 50px; }
p { line-height: 1.5; }
行高和font连写时注意：如果同时设置了二者，注意覆盖问题
font：style weight size/line-height family ;
chrome调试工具
拓展
颜色常见取值
-
属性名
- 文字颜色color
- 背景颜色background-color
-
属性值
颜色表示方式 表示含义 属性值 关键词 预定义的 red,green,blue... RGB 红绿蓝三原色，取值[0,255] rgb(0,0,0),rgb(255,255,255),rgb(255,0,0)... RGBA a表示透明度，取值[0,1] rgba(255,255,255,0.5)... 十六进制表示法 数字转换成16进制 #000000（即#000）,#ff0000（即#f00）,#e92322...
标签水平居中的方法
margin: 0 auto 来实现
如果让div，p，h水平居中直接给当前元素本身设置
margin： 0 auto一般针对固定宽度的盒子，若大盒子没设置狂赌此时默认占满 父元素 的宽度
综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>七月七号练习实例</title>
<style>
.box {
width: 800px;
/*让整体div大盒子水平居中*/
margin: 0 auto;
}
.time {
color: grey;
}
.sina {
color: skyblue;
font-weight: 700;
}
a {
/*去除超链接的下划线*/
text-decoration: none;
}
h1 {
/*background-color: pink;*/
/*要让文本水平居中*/
text-align: center;
}
.info {
/*让span、a标签在p标签中水平居中*/
text-align: center;
}
.content {
/*首行缩进 定义取名为“内容”*/
text-indent: 2em;
}
</style>
</head>
<body>
<div class="box">
<h1>《自然》评选改变科学的10个计算机代码项目</h1>
<p class="info">
<span class="time">2077年02月31日25:61 </span>
<span class="sina">新狼科技</span>
<a href="#">收藏本文</a>
</p>
<hr>
<p class="content">2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。</p>
<p class="content">这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·莱维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力，”他说，“问题在于，我们仍然需要思考。”</p>
<p class="content">如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起，后者已经渗透到研究工作的各个方面。近日，《自然》（Nature）杂志将目光投向了幕后，着眼于过去几十年来改变科学研究的关键计算机代码，并列出了其中10个关键的计算机项目。</p>
<p class="content">最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了机器语言和汇编语言，允许用户用代码为计算机编程，但这两种语言都需要对计算机的架构有深入的了解，使得许多科学家难以掌握。20世纪50年代，随着符号语言的发展，特别是由约翰·巴克斯及其团队在加州圣何塞的IBM开发的“公式翻译”语言Fortran，这种情况发生了变化。利用Fortran，用户可以用人类可读的指令来编程，例如x = 3 + 5。然后由编译器将这些指令转换成快速、高效的机器代码。</p>
</div>
</body>
</html>
