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>
基础选择器
标签选择器★
作用:通过标签名 找到页面中 所有这类标签 ,设置样式使其全部生效
类选择器 ★★
解决以上问题:通过类名找到页面中 所有带有这个类名的标签 ,
![image-20230707142258831](https://img2023.cnblogs.com/blog/3232290/202307/3232290-20230707213048268-1770389414.png)
先定义,然后调用这个定义,谁想变就拿过来用
注意
-
所有标签都有class属性
-
类名可由数字、字母、下划线、中划线组成,但不能以数字或中划线开头
-
一个标签可有多个类名,类名间以空格隔开
<p class="turnRED turnSIZE">222</p>
-
类名可重复,一个类选择器可以同时选中多个标签
id选择器
- 所有标签都有id属性
- 类似身份证号码,在一个页面中是唯一的、不可重复的
- 一个标签只能有一个id属性值
- 一个id选择器只能选中一个标签
通配符选择器
*{}
有多少选多少
开发中使用极少,极特殊情况下用到(如京东网页以此来去除默认的margin和padding属性)
![image-20230707144347584](https://img2023.cnblogs.com/blog/3232290/202307/3232290-20230707213048717-1354616309.png)
字体、文本样式
字体
//大小font-size 取值数字+px
//粗细font-weight 正常normal&400;加粗bold&700
![image-20230707145049728](https://img2023.cnblogs.com/blog/3232290/202307/3232290-20230707213049292-1923195700.png)
//样式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>
![image-20230707171427665](https://img2023.cnblogs.com/blog/3232290/202307/3232290-20230707213050376-2056256083.png)