[已收纳]CSS基础笔记

15195775117 · 发表于 2019-11-7 17:18:34

登录后查看更多精彩内容~

您需要登录才可以下载或查看，没有帐号？立即注册

x

本帖最后由 15195775117 于 2021-2-13 20:20 编辑

css实现了内容与表现的分离，提高了工作效率css支持文本编辑，与HTML、csv、KML一样

opacity属性可设置元素透明度

CSS的基础单元是“样式”，每个样式包括“选择器”和“声明/规则”两部分
CSS忽略空格，便于脚本排版的美化
注释格式：/* */（跟java一样）

CSS的使用格式有4种：
1、行内样式：我手写kml文本时把属性写在地标里，就是这种样式了
2、内嵌样式：谷歌地球生成的kml脚本，把属性放在前面，后面地标调用之，就是这种样式了
3、链接样式：最实用、最广泛的样式，HTML通过<link>标签将“外部样式表文件”链接进来，实现了html和css的完全分离，增强网页的扩展性和维护性
4、导入样式：使用@import命令导入外部样式表

【链接式】与【导入式】的区别：
使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。
这样看，【链接式】较优。

15195775117 · 发表于 2019-11-7 17:34:08

本帖最后由 15195775117 于 2020-10-30 10:03 编辑

【行内样式】写法：
行内样式.jpg

<!DOCTYPE html>
<html dir ="ltr" xml:lang="zh-CN">
<meta charset="UTF-8">
<title>行内样式</title>
<h2 style="background-color:#FF6633">二级标题</h2>
<i style="font-size:30px;color:#FF0000;">字体大小</i>
</html>
颜色格式是RRGGBB，透明度用其他方式设置

15195775117 · 发表于 2019-11-8 09:21:14

本帖最后由 15195775117 于 2020-10-30 10:05 编辑

【内嵌样式】
内嵌样式.jpg

<!DOCTYPE html>
<html dir ="ltr" xml:lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{text-align:left;（左对齐）
font-size:50px;
color:#FF0000;
line-height:25px;（行高）
text-indent:2em;（首行缩进，em的单位表示2个文字大小，也可以用px）
width:500px;
margin:20;
margin-bottom:20px;}（下边距）

big{color:#0000FF;
font-size:80px}
</style>
</head>

<body>
<p>红色段落</p>
<big>蓝色字体</big>
</body>

</html>

15195775117 · 发表于 2019-11-8 09:48:20

本帖最后由 15195775117 于 2020-10-30 10:06 编辑

3、链接样式（最重要，以后就用这个了）
链接样式.jpg

把html和css放在一个文件夹内，
html中代码：
<!DOCTYPE html>
<html dir ="ltr" xml:lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
<link href="段落样式.css" type="text/css" rel="stylesheet"/>
<link href="大字样式与斜体样式.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<p>红色段落</p>
<big>蓝色大字</big>
<i>红色斜体</i>
</body>
</html>

“段落样式.css”代码：
p{text-align:left;
font-size:50px;
color:#00FF00;
line-height:25px;
text-indent:2em;
width:500px;
margin:20;
margin-bottom:20px;}

大字样式与斜体样式.css中代码：
big{color:#0000FF;
font-size:80px}
i{color:#FF0000;
font-size:80px}

注意：
链接写在head里，一个css里可以写几个样式

		自动登录	找回密码
密码			立即注册