学习资料：《CSS菜鸟教程》
学习目标：熟悉CSS语法即可
CSS简介
- 什么是CSS？
- CSS（Cascading Style Sheets）层叠样式表
- CSS定义了如何显示HTML元素
- 样式通常存储在样式表中
- 多样式定义可层叠为一个
CSS语法
<!DOCTYPE html>
<html>
<head>
<title> HTML教程 Fighting!!! </title>
<style>
p{
color: red;
text-align: center;
}
/* css注释 */
</style>
</head>
<body>
<p>heihei</p>
</body>
</html>- CSS语法由 选择器和多条声明 构成
- CSS声明总是以；结尾，用{}括起来
- 注释和C++一样
CSS ID和选择器
<style>
#testparam
{
text-align: center;
color: red;
}
.classtest
{
text-align: center;
color: yellow;
}
</style>- id 和 class功能上差不多，但id是唯一的
- 知乎查了具体的不同，比较多的说法是 ：id给js用，class给css用
CSS创建
样式表创建的三种方法（上面提到过）
- 外部样式表
<!DOCTYPE html> <html> <head> <title> HTML教程 Fighting!!! </title> <link href="mycss.css" rel="stylesheet" type="text/css"> </head> <body> <testcss> oo </testcss> </body> </html> - 内部样式表：把mycss.css的内容全部拷贝到<head>里来
- 内联样式：通过style指定属性
多重样式
- 同名的选择器定义，内联样式 > 内部样式表 > 外部样式表 > 浏览器默认样式
CSS 背景
<!DOCTYPE html>
<html>
<head>
<title> HTML教程 Fighting!!! </title>
<style>
h1{
background-color: yellow;
background-image: url('testimage.png');
background-position: left top;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1> haha </h1>
</body>
</html>- 通过在head定义style标签，通过css对h1进行渲染
css文本格式
<!DOCTYPE html>
<html>
<head>
<title> HTML教程 Fighting!!! </title>
<style>
h1{
text-align: center;
}
p.data{
text-align: right;
}
p.main{
text-align: justify; /*左右对齐*/
}
a{
text-decoration:none; /*去除下划线，也可以加下划线，文本居中下划线*/
}
p.upperletter{
text-transform: uppercase;
}
p.lowerletter{
text-transform: lowercase;
}
p.cap{
text-transform: capitalize;
}
p{
text-indent: 50px;
}
</style>
</head>
<body>
<h1> 标题居中 </h1>
<p class="upperletter">small small </p>
<p class="lowerletter">SMALL </p>
<p class="cap">small small </p>
</body>
</html>- p.classname，专属标签p，在p的class里引用
- 对于p.classname这种形式的style，是选择性的，可以在body内做选择，需要的时候通过class属性指定
- 对于在head内直接改p的属性，是覆盖了标签<p>的默认属性值
- p{}直接修改标签p
CSS 字体
<!DOCTYPE html>
<html>
<head>
<title> HTML教程 Fighting!!! </title>
<style>
p.normal{
font-family: serif;
font-style: normal;
font-size: 32px;
}
p.italic{
font-style: italic;
font-size: 2.0em;
}
</style>
</head>
<body>
<h1> 标题居中 </h1>
<p class="normal">small small </p>
<p class="italic">SMALL </p>
</body>
</html>- font-size：16px = 1.0em，em在浏览器上的兼容性更好
- 字体有斜体和normal
CSS链接
<!DOCTYPE html>
<html>
<head>
<title> HTML教程 Fighting!!! </title>
<style>
a:link{
color: black;
text-decoration: underline;
background-color: black;
}
a:visited{
color: brown;
}
a:hover{
color: coral;
text-decoration: underline;
background-color: yellow;
}
a:active{
color:cornflowerblue;
}
</style>
</head>
<body>
<a href = "http:www.baidu" > 百度 </a>
</body>
</html>- 链接样式定义，顺序要固定：link visited hover active
CSS列表
- ul是无序
- ol是有序
- 通过ul.classname或者ol.classname，可以给HTML元素的class属性赋值做到表现差异化
CSS表格
<!DOCTYPE html>
<html>
<head>
<title> HTML教程 Fighting!!! </title>
<style>
table,th,td
{
border: 1px solid;
/* border-collapse: collapse; 折叠边框 */
width: 200px;
height: 100px;
text-align: right;
vertical-align: top;
padding: 20px;
color:yellow
}
</style>
</head>
<body>
<table>
<th > 表头1 </th>
<th> 表头2 </th>
<tr>
<td>(1,1)</td>
<td>(1,2)</td>
</tr>
<tr>
<td>(2,1)</td>
<td>(2,2)</td>
</tr>
</table>
</body>
</html>- border属性定义，简写的写法； border width,border-style,border-color
CSS盒子模型
CSS边框
<!DOCTYPE html>
<html>
<head>
<title> HTML教程 Fighting!!! </title>
<style>
p.one
{
border-style: solid;
border-width: 10px;
border-color: black;
border-left-style: dotted;
border-left-color: yellow;
}
</style>
</head>
<body>
<p class = "one"> one </p>
</body>
</html>CSS轮廓
/* CSS轮廓 */
outline-color: green;
outline-style: dotted;
outline-width: 30px;嵌套选择器
- p{ }: 为所有 p 元素指定一个样式
- .marked{ }: 为所有 class="marked" 的元素指定一个样式
- .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式
- p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式
块和内联
块重新起一行，内联元素不重起一行
CSS Position
<!DOCTYPE html>
<html>
<head>
<title> HTML教程 Fighting!!! </title>
<style>
p.fixed
{
position: fixed; /* 相对于浏览器位置固定 */
}
p.posleft
{
position: relative;
left: -20px; /* 相对原位置往左偏移20px */
}
p.sitcky
{
position: sticky;/* 粘性定位 */
top: 50px;
color: white;/* 覆盖，类似z-buffer */
z-index: 1;
}
</style>
</head>
<body>
<p class = "sitcky"> fixed </p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
</body>
</html>CSS 布局OverFlow
<!DOCTYPE html>
<html>
<head>
<title> HTML教程 Fighting!!! </title>
<style>
div.overflowtest
{
overflow: scroll;
height : 100px;
background-color: green;
}
</style>
</head>
<body>
<div class = "overflowtest">
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
</div>
</body>
</html>CSS组合选择器
组合选择器描述了两个选择器的关系
- 后代选择器(以空格分隔)
- h1 h2，所有在h1的h2，都执行对应的CSS样式
- 子元素选择器(以大于 > 号分隔）
- h1>h2 ，h2在h1的内部第一层，则被选中
- 相邻兄弟选择器（以加号 + 分隔）
- h1+h2 h2后一个兄弟h1，则被选中
- 普通兄弟选择器（以波浪号 ～ 分隔）
- h1 ~ h2，h1之后的所有h2兄弟，则被选中
CSS伪类
伪类用于添加选择器的特殊效果
selector:pseudo-class {property:value;}
selector.class:pseudo-class {property:value;}
<!DOCTYPE html>
<html>
<head>
<title> HTML教程 Fighting!!! </title>
<style>
/* p:first-child 匹配第一个 <p> 元素 */
/* { */
/* color: yellow; */
/* } */
/* p>i:first-child /* 匹配所有<p> 元素中的第一个 <i> 元素 */
/* {
color: blue;
} */ */
p:first-child i{
color: green;
}
</style>
</head>
<body>
<div>
<p>滚<i>动</i><i>动</i> </p>
<p>来回滚动<i>我</i></p>
<p>滚动我</p>
<p>来<i>回</i><i>滚</i>动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
</div>
</body>
</html>CSS 伪元素
添加一些选择器的特殊效果
<!DOCTYPE html>
<html>
<head>
<title> HTML教程 Fighting!!! </title>
<style>
/* p:first-line
{
color: green;
}
p:first-letter
{
color: yellow;
} */
p:before
{
content: url(66.png);
}
p:after
{
content: url(66.png);
}
</style>
</head>
<body>
<p> hahah </p>
</body>
</html>伪类和伪元素的异同
- 都是fake
- 伪元素是元素，类是类。前者和元素是平级关系，类是包含在元素中
CSS 导航栏
<!DOCTYPE html>
<html>
<head>
<title> HTML教程 Fighting!!! </title>
<style>
ul
{
list-style-type: none; /*列表标记*/
margin: 0;
padding: 0;
width: 25%;
height: 100%;
position: fixed;
}
a
{
display: block; /*可点击区域*/
background-color: yellow;
width: 40px;
}
a:hover
{
background-color: black;
}
li{
border: 1px solid;
}
</style>
</head>
<body>
<ul>
<li><a href="hah">test1</a></li>
<li><a href="hah">test2</a></li>
<li><a href="hah">test3</a></li>
<li><a href="hah">test4</a></li>
</ul>
<div style="margin-left:25%;padding:1px 16px;height:100%;">
<h2>Fixed Full-height Side Nav</h2>
<h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
<p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
<p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
</div>
</body>
</html>- 左侧是全屏高度，右侧是可滚动的
- 通过fix固定，通过margin-left通过比例做隔离
CSS 下拉菜单
当鼠标移动到指定元素上时，显示下拉菜单
<!DOCTYPE html>
<html>
<head>
<title> HTML教程 Fighting!!! </title>
<style>
.dropdown
{
display: inline-block;
position: relative;
}
.dropdown-content
{
display: none;
background-color:white;
max-width: 160px;
}
.dropdown:hover .dropdown-content
{
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<span>鼠标移动到我这！</span>
<div class="dropdown-content">
<p>菜鸟教程</p>
<p>www.runoob</p>
</div>
</div>
</body>
</html>- .dropdown 没被隐藏，被作为父标签的class，当鼠标放在父标签的内容上时，.dropdown:hover就被触发了，然后.dropdown-content的display: block;
CSS图像拼接
客户端发送多个请求到服务器，比较浪费性能，耗时久。不如直接一次性把所有图片发下来，客户端做切割显示
img.home {
width: 46px;
height: 44px;
background: url(/images/img_navsprites.gif) 0 0;
}CSS媒体类型
<!DOCTYPE html>
<html>
<head>
<title> HTML教程 Fighting!!! </title>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:1px;}
}
@media print
{
p.test {font-family:times,serif;font-size:100px;} /* 打印模式 */
}
</style>
</head>
<body>
<p class="test">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
</body>
</html>CSS计数器
<!DOCTYPE html>
<html>
<head>
<title> HTML教程 Fighting!!! </title>
<style>
body
{
counter-reset: section;
}
p::before
{
counter-increment: section;
content: "Section " counter(section) ":";
}
</style>
</head>
<body>
<p> test1 </p>
<p> test2 </p>
<p> test3 </p>
</body>
</html>CSS网页布局
<!DOCTYPE html>
<html>
<head>
<title> HTML教程 Fighting!!! </title>
<style>
.header
{
text-align: center;
font-size: 50px;
color: green;
background-color: black;
margin: 50px;
}
.topnav
{
background-color: #333;
}
.topnav a
{
background-color: ;
text-align: center;
padding: 20px;
color: green;
}
</style>
</head>
<body>
<div class = "header">
头部区域
</div>
<div class = "topnav">
<a href = "http::www.baidu"> test1 </a>
<a href = "http::www.baidu"> test2 </a>
</div>
</body>
</html>- 通过样式，在body内指定类，指定类里的某个标签，通过父级应该子级
总结：通过在<style></style>中，添加类声明，对HTML的元素进行自定义渲染
更多推荐
《CSS菜鸟教程》学习
发布评论