<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css基础认识</title>
<style>
p{ color: pink; }
</style>
<link rel="stylesheet" href="css/demo.css">
</head>
<body>
1.Css基础知识
<!-- css
cascading style sheets 层叠样式表。 规定了HTML标签在网页上的显示方式。
HTML：规定网页上有什么内容
css：规定网页上这些内容的样式。
使用HTML写样式的痛点：
1.代码比较臃肿。
2.可读性比较差。
3.不便于维护。
4.对搜索引擎不友好，搜索引擎更关心内容。
使用css的优点：
1.代码比较简洁
2.可读性比较强
3.便于维护
4.更关心内容，对搜索引擎比较友好。
-->
2.Css使用
<!-- 如何去使用css
基础语法：
选择器{
属性: 属性值;（声明）
属性: 属性值;
}
选择器：选择页面中哪些元素去做样式的修改。
声明：要做什么样的样式修改。
声明：都是由属性和属性值组成的。中间用：，以分号结尾。
css对缩进和空格不敏感，咱们可以通过合理的缩进来提高代码的可读性。
css分为五类：文本，盒子，浮动，定位，背景。
文本：
字体，大小，颜色。
盒子：宽，高，背景色，边框、
书写位置。
1.行内式，内嵌式，外链式，导入式。
-->
<!-- 行内式写法。 直接写在标签style属性中
行内式：写法简单。
缺点：1.结构和样式没有分离。
2.只对当前的标签生效。不能够复用。
开发中不推荐使用。
-->
<p>妖怪，我要你助我修行。</p>
<!-- 内嵌式
写法：
<style>
.....
</style>
使用style标签，在head标签内。
css属性写在style标签内。
缺点：
1.如果样式比较多，页面代码会比较多。
2.只对当前页面生效。如果说多个页面有共同的样式，需要写多次。
优点：
结构和样式分离。
样式可以复用。
-->
<p>红的花是绿的草</p>
<!-- 外链式
写法：<link rel="stylesheet" href="css/demo.css">
通过link标签，引入外部的css文件。
优点：
结构和样式分离。
样式可以复用。
可以多个页面使用。
-->
<p >大威天龙</p>
<!-- 导入式。
写法：
<style>
@import url(css/demo.css);
</style>
外链式：会先加载css，再去加载HTML页面。
导入式：会先加载HTML页面，再加载css。
不推荐使用导入式，使用最多的是外链式。
-->
3.Css基本属性
/* font-size:字体大小，单位一般使用像素。对于谷歌浏览器来说，最小的单位是12px IE浏览器不设置最小字体。
color：给标签中的文字设置颜色，不是背景色。
取值：十六进制，RGB，RGBA，颜色名（英文。）
font-family:字体。
字体设置会跟用户电脑中安装的字体有关，如果设置的字体，用户电脑中没有，会默认显示为微软雅黑，宋体。
字体是可以设置多个值。
中文字体和英文字体都可以设置。
英文字体要放在前面，后面跟中文字体。字体之间用，分割开。后面是备用的字体。 */
4.Css选择器的使用
<!--
选择器：选择页面上的元素进行样式的修改。
标签选择器：
通过标签名来选择相应的标签。
会选择页面中所有的相应标签，不管嵌套关系是怎么样的。
用途：a标签，li标签。利用标签选择器，进行默认样式的初始化。
因为标签选择器会选择页面中所有的相应标签，实际工作中，不会用来更改某一个标签的样式。
ID选择器：
通过给标签设置一个ID值，然后通过这个ID值来选择标签。
写法：
#id{
声明；
}
一个页面中ID值是唯一的，ID选择器只会选择一个标签。
id值的写法规范：以字母开头，后面可以是数字，下划线或横线。
痛点：
假如有多个标签，有同样的样式，使用ID选择器的时候，需要分别给他们设置ID值，然后再重复的设置一样的样式。
id常用场景：不是用来设置样式，配合js去添加事件的。 -->
</body>
</html>
1.Css练习
1.HTML文档
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>周杰伦的歌</title>
<link rel="stylesheet" href="./css作业.css">
</head>
<body>
<div>
<h1>周杰伦的歌</h1>
<P>徒留我孤单在湖面成双。——《菊花台》</P>
<P>繁华如三千东流水，我只取一瓢爱了解。——《发如雪》</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>
</div>
</body>
</html>
2.Css文档
@charset "utf-8";
body {
width: 1000px;
height: 500px;
background-color: cyan;
font-size: 13px;
font-family: "微软雅黑";
border: 1px solid black;
}
/* * {
margin: auto;
padding: 0;
} */
/* div {
margin: 0 auto;
} */
p,
h1 {
background-color: yellow;
color: blue;
}
#Orz {
background-color: green;
}
.T_T {
color: green;
text-align: center;
}
扫一扫
471
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
