目录：
一：CSS作用
二：CSS样式
三：CSS选择器
四：CCS文本&字体属性
一：CSS作用：
外观美化，布局，定位
二：CSS的三种样式：行内样式；内部样式；外部样式
外部样式
<link rel="stylesheet" href="../../css/first.css">
的代码
li {
color: red;
font-size: 19px;
font-weight: bold;
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--外部样式--> <link rel="stylesheet" href="../../css/first.css"> <!--内部样式--> <style> li { color: coral; font-size: 19px; font-weight: bold; } #qwer { color: crimson; } </style> <title>CSS使用方法{内部，行内}</title> </head> <body> <!--CSS的使用方法分3类： 1：行内样式 <li style="color: ;size: "> 缺点：代码繁复，影响正常的代码审查，不利于后期维护（最不推荐！） 优点：样式的优先级高，可以实现整体风格下的单独效果。 2：内部样式 缺点：代码复用程度低（不同页面不能复用）。 3：外部样式 默认情况下，优先级: 行内样式 > 内部样式 > 外部样式 但是要考虑顺序，即就近原则 特殊情况下，那就是外部样式在内部样式的后面引入，会发现相同类名或ID定义的样式，行外的的优先级是高于行内的 再就是考虑权值原则：内联选择器1000，id选择器是100，类选择器是10，标签选择器是1 在样式后边加一个!important,用它修饰的样式具有最高的控制权。 --> <ul> <!--行内样式--> <li style="color: #4D2E83">数学院</li> <li>法学院</li> <li>理学院</li> <li>工学院</li> <li id="qwer">外国语学院</li> <li>航海学院</li> <li>国防生学院</li> </ul> </body> </html>
运行图
上文提到的特殊情况的代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--外部样式--> <!--内部样式--> <style> li { color: coral; font-size: 19px; font-weight: bold; } </style> <link rel="stylesheet" href="../../css/first.css"> <title>CSS使用方法{内部，行内}</title> </head> <body> <ul> <li>数学院</li> <li>法学院</li> <li>理学院</li> <li>工学院</li> <li>外国语学院</li> <li>航海学院</li> <li>国防生学院</li> </ul> </body> </html>
运行图
上边图运行后，产生的结果是外部样式优先于内部样式，与常态不符。
观察权值的代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #redP p { /*权值=100+1=101*/ color: #F00; /*红色*/ } #redP .red em { /*权值=100+10+1=111*/ color: #00F; /*蓝色*/ } #redP p span em { /*权值=100+1+1+1=103*/ color: #FF0; /*黄色*/ } </style> <title></title> </head> <body> <div id="redP"> <p class="red">红色 <span><em>蓝色</em></span> </p> </div> <!--运行后是红色的红色 蓝色的蓝色--> </body> </html>
运行图
三：CSS的几种选择器：
1标签选择器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /*选择器：你要操作的页面原素 标签选择器:作用于当前页面的所有li标签*/ li { color: red; } </style> <title>标签选择器</title> </head> <body> <ul> <li>理学院</li> <li>计算机学院</li> <li>外国语学院</li> <li>汽车学院</li> <li>机械学院</li> <li>管理学院</li> <li>通信学院</li> </ul> <ul> <li>工学院</li> <li>计算机学院</li> <li>外国语学院</li> <li>法学院</li> <li>管理学院</li> <li>数学院</li> <li>海航学院</li> <li>国防生学院</li> </ul> </body> </html>
运行图
2 ID选择器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /*ID选择器：给当前页面指定的id元素添加样式 同一个页面，不能出现重复的id*/ #change { color: red; } </style> <title>ID选择器</title> </head> <body> <ul> <li id="change">理学院</li><!--id不能重复--> <li>计算机学院</li> <li>外国语学院</li> <li>汽车学院</li> <li>机械学院</li> <li>管理学院</li> <li>通信学院</li> </ul> </body> </html>
运行图
3：类选择器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /*类选择器：给当前页面某一类标签添加样式 同一个页面，可以存在多个同名的类*/ .change { color: red; } </style> <title>类选择器</title> </head> <body> <ul> <li class="change">理学院</li> <li>计算机学院</li> <li class="change">外国语学院</li> <li>汽车学院</li> <li class="change">机械学院</li> <li>管理学院</li> <li class="change">通信学院</li> </ul> </body> </html>
运行图
4：后代选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /*标签选择器 1*/ li { color: yellow; } /*后代选择器 100*/ #second li { color: red; } /*同级标签才有可比较性 所以在second后加li，才让li相互作用*/ </style> <title>补充：选择器</title> </head> <body> <!--后代选择器--> <ul id="first"> <li>烟台大学</li> <li>鲁东大学</li> <li>山东大学</li> </ul> <ul id="second"> <li>青岛大学</li> <li>青岛理工大学</li> <li>山东科技大学</li> </ul> <ul id="third"> <li>青岛大学2</li> <li>青岛理工大学2</li> <li>山东科技大学2</li> </ul> </body> </html>
运行图
5：子代选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /*后代选择器*/ /*h1 strong{ color: red; }*/ /*子代选择区器*/ h1 > strong { color: red; } </style> <title>子代选择器</title> </head> <body> <h1> This is <strong>very</strong> <strong>very</strong> important. This is <em>really <strong>very</strong></em> important. </h1> </body> </html>
运行图
6：相邻选择器
注：相邻选择器只是下边相邻
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /*相邻选择器用+*//*同级标签才能用*/ h1 + p { color: red; } /*效果是只有与h1相邻的那个p段落变色了*/ </style> <title>相邻选择器</title> </head> <body> <h1>asdfklasjf</h1> <p>asdgfnjk</p> <p>asdgfnjk</p> <p>asdgfnjk</p> <p>asdgfnjk</p> <p>asdgfnjk</p> </body> </html>
运行图
7：伪类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /*奇数行变色*/ /*li:nth-child(2n-1){ color: red; }*/ /*首行或者末行变色*/ /*li:first-child{ color: red; } li:last-child{ color: yellow; }*/ /*li:hover{!*鼠标在哪哪里红*! color: red; }*/ /*鼠标浮动隔行变色*/ li:nth-child(2n):hover { color: red; } li:nth-child(2n-1):hover { color: yellow; } </style> <title>伪类选择器</title> </head> <body> <ul> <li>asdfhajksfd</li> <li>asgfasfasdf</li> <li>afsjaklsfjs</li> <li>asdgfjafsdk</li> <li>gkioasfjasd</li> <li>gkioasfjasd</li> </ul> </body> </html>
运行图
上边图的特效是鼠标指针放在哪里，那里变色，且奇数行变黄色，偶数行变红色。
8：通配符选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /*通配符选择器：*代表选中所有标签*/ * { padding: 0px; margin: 0px; } #div1 { height: 200px; background-color: yellow; } li { list-style: none; } </style> <title>通配符选择器</title> </head> <body> <div id="div1"> <ul> <li>sdfa</li> <li>asdfasf</li> <li>asfda</li> <li>asfda</li> </ul> </div> </body> </html>
运行图
注意边距没了
四：CCS文本&字体属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /*字体 加粗的属性值可以为 1：数值型 100-900 2：名称 bold（900） lighter border*/ /*！！！！！设置文本的行高等于他容器的高度， 可以实现文本的垂直对齐！！！！！*/ #div1 { font-weight: 400; font-size: 30px; /*放大*/ font-family: 新宋体; font-style: italic /*斜体*/; color: red; /*字体颜色*/ opacity: 0.8; /*透明度*/ line-height: 100px; /*行高：字体行高与容器等高，字体就会居中显示。*/ height: 100px; /*div的高度*/ background-color: aqua; /*背景颜色*/ text-align: center; /*对齐*/ letter-spacing: 1px; /*字的间距*/ text-decoration: overline; /*类同于u&s标签*/ text-decoration: line-through; /*向文本添加修饰*/ text-decoration-color: black; /*线的颜色*/ text-decoration-style: dotted; /*线的style*/ overflow: hidden; /*溢出容器部分隐藏*/ text-overflow: ellipsis /*ellipsis省略号的意思*/; /*超出部分显示...*/ white-space: nowrap; /*文体不换行，硬向右边撑*/ text-shadow: -5px -5px 5px yellow; /*阴影的水平位置 垂直位置 模糊距离 颜色*/ /*文本阴影：h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊的距离。 color 可选。阴影的颜色。*/ -webkit-text-stroke: 1px black; /*描边的宽度和颜色*/ } span { font-weight: bolder; } p { font-size: 18px; text-indent: 2em; /*+缩进-悬挂*/ } </style> <title>文本属性</title> </head> <body> <div id="div1">简写属性。作用是把所 <!--空格--> 有的属性设一。简写属性。。 <span> 烟台大学 </span> <s>fda士大夫、</s><!--中画线--> <u>asfas</u><!--下划线--> H<sub>2</sub>O<!--水的化学式--> 2<sup>3</sup><!--2的3次方--> 啊手动阀撒发生发生发射点发射点发射点发 </div> </body> <p> 水叮当（Aqua）是一支流行舞曲乐队，由来自丹麦、挪威的成员组成。从1997年至2002年，这个团体创下了全球2800万张... </p> <p> 水叮当（Aqua）是一支流行舞曲乐队，由来自丹麦、挪威的成员组成。从1997年至2002年，这个团体创下了全球2800万张... </p> </html>
运行图
除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：
- Serif 字体 衬线体
- Sans-serif 字体 非衬线体
- Monospace 字体
- Cursive 字体
- Fantasy 字体
font 简写属性在一个声明中设置所有字体属性。
可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family"
font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。
文本阴影和文本描边
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> p{ font-size: 50px; text-align: center; color: #FF0000; text-shadow: 5px 1px 0px yellow;/*阴影的水平位置 垂直位置 模糊距离 颜色*/ -webkit-text-stroke: 1px black;/*描边的宽度和颜色*/ } </style> <title>文本阴影和文本描边</title> </head> <body> <p>青岛理工大学</p> </body> </html>
运行图
2105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
