今日所学CSS基础
cascading style sheets 层叠样式表。
规定了HTML标签在网页上的显示方式。
HTML：规定网页上有什么内容
css：规定网页上这些内容的样式。
使用HTML写样式的痛点：
1.代码比较臃肿。
2.可读性比较差。
3.不便于维护。
4.对搜索引擎不友好，搜索引擎更关心内容。
使用css的优点：
1.代码比较简洁
2.可读性比较强
3.便于维护
4.更关心内容，对搜索引擎比较友好。
如何去使用css
基础语法：
选择器{
属性: 属性值;（声明）
属性: 属性值;
}
选择器：选择页面中哪些元素去做样式的修改。
声明：要做什么样的样式修改。
声明：都是由属性和属性值组成的。中间用：，以分号结尾。
css对缩进和空格不敏感，咱们可以通过合理的缩进来提高代码的可读性。
css分为五类：文本，盒子，浮动，定位，背景。
文本：
字体，大小，颜色。
盒子：宽，高，背景色，边框、
书写位置。
1.行内式，内嵌式，外链式，导入式。
行内式写法。 直接写在标签style属性中
行内式：写法简单。
缺点：1.结构和样式没有分离。
2.只对当前的标签生效。不能够复用。开发中不推荐使用。
选择器：选择页面上的元素进行样式的修改。
标签选择器：通过标签名来选择相应的标签。
会选择页面中所有的相应标签，不管嵌套关系是怎么样的。
用途：a标签，li标签。利用标签选择器，进行默认样式的初始化。
因为标签选择器会选择页面中所有的相应标签，实际工作中，不会用来更改某一个标签的样式。
ID选择器：通过给标签设置一个ID值，然后通过这个ID值来选择标签。
写法：#id{
声明；
}
一个页面中ID值是唯一的，ID选择器只会选择一个标签。
id值的写法规范：以字母开头，后面可以是数字，下划线或横线。
痛点：
假如有多个标签，有同样的样式，使用ID选择器的时候，需要分别给他们设置ID值，然后再重复的设置一样的样式。
id常用场景：不是用来设置样式，配合js去添加事件的。
内嵌式
写法：
<style>
.....
</style>
使用style标签，在head标签内。
css属性写在style标签内。
缺点：
1.如果样式比较多，页面代码会比较多。
2.只对当前页面生效。如果说多个页面有共同的样式，需要写多次。
优点：
结构和样式分离。
样式可以复用。
外链式
写法：<link rel="stylesheet" href="css/demo.css">
通过link标签，引入外部的css文件。
优点：
结构和样式分离。
样式可以复用。
可以多个页面使用。
<p >大威天龙</p>
导入式。
写法：
<style>
@import url(css/demo.css);
</style>
外链式：会先加载css，再去加载HTML页面。
导入式：会先加载HTML页面，再加载css。
不推荐使用导入式，使用最多的是外链式。
今日作业代码截图：
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./今日所学.css">
</head>
<body>
<h1>林俊杰的经典歌词</h1>
<p>我要离去别在哭泣，不要伤心请你相信我，要等待我的爱，陪你永不离开。——《会有那么一天》</p>
<p>冻结那时间，冻结初遇那一天，冻结那爱恋，冻结吻你那瞬间。——《冻结》</p>
<p id="Orz">错与对竟然也凑在一堆，我细胞己崩溃，谁大声的哀叹，谁会在乎要如何收场，你偏偏此刻出现，把我抽离蛮荒的世界……——《星空下的吻》</p>
<p id="Orz">我要宣布爱你的人就是我，对没有错就是要，简简单单爱就是我，你爱我，不需要啰嗦。——《就是我》</p>
<p id="Orz">让爱，轻悄悄的，追来的不露痕迹，化成一件外衣，披上眼前的你，我思念到了底，就一直逗留在你心里。——《精灵》</p>
<p id="Orz">你需要我的傻笑，我需要你的拥抱，爱情就需要这样，它才不会单调，我知道有时候也需要吵吵闹闹，但始终也知道只有你对我最好。——《豆浆油条》</p>
<p class="T_T">只是简简单单的爱过，我还是我，简简单单的伤过，就不算白活，简简单单的疯过，被梦带走，当故事结束之后，心也喜欢，一个人寂寞。——《简简单单》</p>
<p class="T_T">你走的那天，我决定不掉泪 迎风撑着眼帘用力不眨眼。——《无尽的思念》</p>
<p class="T_T">他以为身在暗处（其实过街老鼠），他以为得到好处（其实判断错误。——《盗》</p>
<p class="T_T">不要走开 幸福的开始 就是放手去爱。——《期待爱》</p>
</body>
</html>
css代码
@charset "utf-8";
body {
width: 800px;
height: 600px;
background-color: rgb(132, 241, 245);
border: 1px solid rgb(145, 142, 142);
font-size: 13px;
font-family: "微软雅黑";
margin: auto;}
h1,p {
background-color: yellow;
color: blue;
}
#Orz {
background-color: green;
}
.T_T {
color: green;
text-align: center;
}
1565
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
