一、使用css三种方式
1、外链式：在head中通过link链接外部css文件
2、嵌入式：通过style标签里面写css，通常在head里面
3、内联式：通过标签本身的style属性，在标签上写样式
<!DOCTYPE html> <HTML> <head> <title>学习css</title> <meta charset="utf-8"> <!-- 在html中使用css三种方式 1、外链式：在head中通过link链接外部css文件 2、嵌入式：通过style标签里面写css，通常在head里面 3、内联式：通过标签本身的style属性，在标签上写样式 --> <!-- <link rel="stylesheet" href="./myfirst.css"> --> <!-- <style> div { 500px; height: 500px; background: blueviolet } </style> --> </head> <body> <div style=" 500px;height: 200px;background: cadetblue;"> div </div> </body> </HTML>
以下是示例使用的myfirst.css代码
div{ width: 500px; height: 500px; background: red }
二、文本样式
这里示例有用到下面的选择器
<!DOCTYPE html> <HTML> <head> <title>学习css</title> <meta charset="utf-8"> <style> /* 这种所有的p标签都会生效 */ p { color: #8b0000; /* 字体大小 */ font-size: 18px; /* 字体行高 */ line-height: 30px; } /* 对class="p1"的标签生效， 设置了某种属性，就会覆盖全局设置的某种属性 */ .p1 { color: #000; /* 字体加粗 */ font-weight: bold; /* 字体倾斜 */ font-style: italic; /* 缩进，根据字体大小可以推断缩进几个字符 */ text-indent: 36px; /* 设置字体 */ font-family: "楷体"; /* 居中 */ text-align: center; } .p4 { /* 同时设置几个属性，下面的顺序是：是否加粗、字号/行高、字体样式 */ font: normal 12px/36px '微软雅黑'; } </style> </head> <body> <div style="text-align: center;"> <!-- span标签不能设置居中，但是可以设置div居中来达到div中所有内容居中的效果 --> <span>标题</span> <p class="p1">北京时间10月20日消息，奥运冠军杨倩入围2021年清华大学特等奖学金候选。根据规定，她可以拿到1.5万元奖学金。</p> <p>北京时间10月20日消息，奥运冠军杨倩入围2021年清华大学特等奖学金候选。根据规定，她可以拿到1.5万元奖学金。</p> <p>北京时间10月20日消息，奥运冠军杨倩入围2021年清华大学特等奖学金候选。根据规定，她可以拿到1.5万元奖学金。</p> <p class="p4">北京时间10月20日消息，奥运冠军杨倩入围2021年清华大学特等奖学金候选。根据规定，她可以拿到1.5万元奖学金。</p> </div> </body> </HTML>
三、背景设置background
1、设置背景颜色【颜色名、rgb（rgba第四个值是设置透明度）、16进制数值】
2、url 背景图片
<!DOCTYPE html> <HTML> <head> <title>背景</title> <meta charset="utf-8"> <style> /* 给div元素设置样式 */ div { width: 400px; height: 400px; /* 1、设置背景颜色【颜色名、rgb（rgba第四个值是设置透明度）、16进制数值】 2、url 背景图片 */ /* background: rgb(219, 135, 222); */ background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fffvii-remake.square-enix-games.com%2Fimages%2Fcharacters%2Fcharacters_full_tifa.png&refer=http%3A%2F%2Fffvii-remake.square-enix-games.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg); /* 背景图大小 百分比、像素值以及具体的单词都可以 auto-原图大小 cover-铺满 */ background-size: 100px 100px; background-repeat: no-repeat; } /* 给整个body设置背景 */ body { background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fffvii-remake.square-enix-games.com%2Fimages%2Fcharacters%2Fcharacters_full_tifa.png&refer=http%3A%2F%2Fffvii-remake.square-enix-games.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg); background-size: 50% 400px; /* 平铺效果：no-repeat不平铺、 repeat-x水平平铺、repeat-y竖直平铺*/ background-repeat: no-repeat; /* 背景位置 百分比、像素值以及具体的位置单词都可以，默认是左上角*/ background-position: 20%; /* 固定背景，不会随着浏览器上下滑动而滑动 */ background-attachment: fixed; } </style> </head> <body> <div class="class">div1</div> </body> </HTML>
四、选择器
1、标签选择器(不常用)：通过元素的标签名进行选择
2、类选择器：通过元素class属性去选择
3、id选择器(也不常用，一般是js用的)
4、属性选择器(不常用)，示例如下，还可以根据name="b1"更具体的去筛选
5、包含选择器（层级）,根据层级用空格分开，可以标签、类、id、属性混用
6、组选择器，通过逗号隔开，也可以标签、类、id、属性混用
7、伪类及伪元素选择器
hover ：悬停显示效果
link ：向未被访问的链接添加样式
visited ：向已被访问的链接添加样式，只有color属性生效
active：链接被激活时的状态，也就是网页链接跳转之前的鼠标松开的状态
定义顺序为a:link>a:visited>a:hover>a:active
参考链接：https://blog.csdn.net/lionwerson/article/details/105991623
<!DOCTYPE html> <HTML> <head> <title>css选择器</title> <meta charset="utf-8"> <style> /* 1、标签选择器(不常用)：通过元素的标签名进行选择 */ li { color: rgb(172, 69, 69); } /* 2、类选择器：通过元素class属性去选择 */ .li3 { color: rgb(91, 69, 172); } /* 3、id选择器(也不常用，一般是js用的) */ #b2 { background: chartreuse; } /* 4、属性选择器(不常用)，示例如下，还可以根据name="b1"更具体的去筛选 */ div[name] { font-size: 20px; } /* 5、包含选择器（层级）,根据层级用空格分开，可以标签、类、id、属性混用 下面例子.ul1如果省略，那么div下所有层级的li都会有此效果 */ div .ul1 li { font-style: italic; } /* 6、组选择器，通过逗号隔开，也可以标签、类、id、属性混用 */ h1, h2, h3 { font-weight: bold; } /* 7、伪类及伪元素选择器 hover 悬停显示效果 link 向未被访问的链接添加样式 visited 向已被访问的链接添加样式，只有color属性生效 active：链接被激活时的状态，也就是网页链接跳转之前的鼠标松开的状态 定义顺序为a:link>a:visited>a:hover>a:active 参考链接：https://blog.csdn.net/lionwerson/article/details/105991623 */ .python:hover { background: chartreuse; font-size: 30px; } a:link { color: #1515eb; font-weight: bold; font-size: 30px; } a:visited { color: rgb(31, 216, 14); } </style> </head> <body> <div class="box1" name="b1">box1</div> <div class="box2" id="b2">box1 <h1>h111111</h1> <h2>h222222</h2> <h3>h333333</h3> </div> <div class="box3"> <ul class="ul1"> <li>11</li> <li>22</li> <li class="li3">33</li> <li>44</li> <li>55</li> </ul> </div> <div class="box4"> <!-- 去掉无序列表前面的点，list-style-type设置为none --> <ul style="list-style-type: none;"> <li class="python">python</li> <li>java</li> <li>php</li> <li>c++</li> <li>go</li> </ul> <a href="https://www.baidu.com">百度</a> </div> </body> </HTML>
五、三种模型框
1、内边距 padding
2、边框线 border
3、外边距 margin，无背景色
<!DOCTYPE html> <HTML> <head> <title>学习css</title> <meta charset="utf-8"> <style> /* 三种模型框 1、内边距 padding 2、边框线 border 3、外边距 margin，无背景色 */ .box1 { width: 200px; height: 200px; background: darkgreen; padding: 20px; border: solid 5px red; margin: 10px; } .box2 { width: 300px; height: 300px; /* 内边距：可以设置有内边距的方向 */ padding-left: 200px; background: darkgrey; /* 边框线：dotted-点线、solid-实线、double-双线 */ border: dotted 5px blue; /* 外边距：单独设置一个方向 */ margin-top: 30px; } .box3 { width: 400px; height: 400px; /* 内边距：设置2个值，第一个代表上下、第二个代表左右 */ padding: 20px 10px; background: darkkhaki; /* 边框线：可以设置有边框线的方向，设置的三个值无顺序要求 */ border-left: rgb(255, 0, 0) 5px double; /* 外边距：设置2个值，第一个代表上下、第二个代表左右 */ margin: 10px auto; } </style> </head> <body> <div class="box1">有闲的节奏，挑拨的琴弦，在微风吹过斑驳光影的树下，倾听弦的声音，揣测着风的方向，越来越快乐，越来越幸福…… </div> <div class="box2"></div> <div class="box3"></div> </body> </HTML>
六、元素定位
三种定位机制 : 普通文档流 (text)| 浮动(float) | 定位(position)
1、普通文档流【CSS中默认的文本文档】
除非专门指定，否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。
块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。
2、层定位
对每个图层进行相应的定位（相对定位relative、绝对定位absolute、固定定位fixed、无定位static）
3、浮动
<!DOCTYPE html> <HTML> <head> <title>学习css</title> <meta charset="utf-8"> <style> /* CSS3 中有三种定位机制 : 普通文档流 (text)| 浮动(float) | 定位(position) 一、普通文档流【CSS中默认的文本文档】 除非专门指定，否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。 块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。 二、层定位 对每个图层进行相应的定位（相对定位relative、绝对定位absolute、固定定位fixed、无定位static） 三、浮动 */ div { width: 200px; height: 200px; } .box1 { background: rgb(8, 240, 8); } .box2 { background: rgb(190, 15, 38); /* 相对定位，相对标签原来在页面文档中的位置进行偏移 */ position: relative; right: 50px; top: 50px; } .box3 { background: rgb(202, 235, 14); /* 固定位置，相对于浏览器窗口进行定位 */ position: fixed; left: 500px; top: 100px; } .box4 { background: cyan; /* 绝对定位，相对已经定位的父级元素进行偏移，如果父级都没有，则相对于左上角偏移 */ position: absolute; left: 50px; top: 50px; } .box00 { width: 1000px; height: 100px; background: lightsteelblue; } .box00 div { /* 设置浮动，设置box00浮动不会对包含的4个div生效，只会对本标签生效 */ float: left; } .box11 { background: blue; } .box22 { background: rgb(0, 255, 13); } .box33 { background: rgb(200, 25, 216); } .box44 { background: rgb(235, 10, 179); } </style> </head> <body> <div class="box1">有闲的节奏，挑拨的琴弦，在微风吹过斑驳光影的树下，倾听弦的声音，揣测着风的方向，越来越快乐，越来越幸福…… </div> <div class="box2"></div> <div class="box3"></div> <div class="box" style="height: 500px; 500px;background: darkolivegreen;position: relative;"> <div class="box4"></div> <!-- 如果box4没有绝对定位，页面则是从上到下的顺序排列 如果有绝对定位，下面的box1则会顶到原来box4的位置（固定位置也有此效果，但相对定位没有此现象） --> <div class="box1"></div> <div class="box1"></div> </div> <hr> <div class="box00"> <div class="box11"></div> <div class="box22"></div> <div class="box33"></div> <div class="box44"></div> </div> </body> </HTML>
练习
<!DOCTYPE html> <HTML> <head> <title>学习css</title> <meta charset="utf-8"> <style> /* https://element.eleme.cn/#/zh-CN/component/container 子元素浮动，父元素必须设置高度，否则下面的元素会塌进来 。不设置高度可以用下面2个办法解决 1、给父元素设置(用的比较多) overflow:hidden 2、在浮动元素后，添加额外的块级子元素，并设置 clear:both */ .box { width: 100%; /* height: 86px; */ background: black; /* overflow:hidden */ } .clear { clear: both } .box div { width: 100px; height: 86px; float: left; color: white; line-height: 86px; text-align: center; } .box div:hover { background: #00FFFF; } .content { height: 800px; background: rgb(121, 126, 131); margin-top: 10px; } .left { width: 200px; height: 800px; background: rgb(8, 107, 236); float: left; } .right { width: 800px; height: 800px; float: left; background: rgb(22, 199, 90); margin-left: 10px; /* none不显示、block显示 */ display: block; } </style> </head> <body> <div class="box"> <div class="box11">1</div> <div class="box22">2</div> <div class="box33">3</div> <div class="box44">4</div> <p class="clear"></p> </div> <div class="content"> <div class="left"></div> <div class="right"></div> </div> </body> </HTML>