CSS教程学习笔记
教程链接：CSS教程-菜鸟教程
CSS简介
CSS-层叠样式表（Cascading Style Sheets）
- 定义如何显示HTML元素
- 作用等同于 HTML 中的字体标签和颜色属性
- 样式通常保存在外部的 .css 文件中，我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观
CSS插入方式
- 内联样式：在HTML元素中使用style属性
- 内部样式表：在头部<head>区域使用<style>元素包括CSS
- 外部样式表：用头部元素<link>元素使用外部CSS文件
优先级：内联样式 > 内部样式 > 外部样式 > 浏览器默认样式
如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
CSS语法
选择器 一条/多条声明
选择器：需要改变样式的 HTML 元素
声明：{属性:值;属性:值;…;}
不要在属性值与单位之间留有空格（如：“margin-left: 20 px” )
示例
/*注释*/
body {background-color:yellow;}
h1 {font-size:36pt;}
p {color:red;text-align:center;}
选择器
类名
直接指定某一类，见上例
id选择器
以"#"定义,可以为特定id的HTML原色指定特定样式
*ID属性尽量不要以数字开头（不适用于Mozilla/Firefox 浏览器）
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS教程</title>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>
class选择器
以"."号定义，用于描述一组元素的样式/指定特定HTML元素
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS教程</title>
<style>
.center
{
text-align:center;
}
p.center {text-align:center;} /*指定所有使用class="center"的p元素*/
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>
属性选择器
[title] /*包含title属性的所有元素变为蓝色*/
{
color:blue;
}
[title=runoob] /*title属性值为"runoob"的所有元素*/
{
border:5px solid green;
}
[title~=runoob] { color:blue; } /*title属性值包含"runoob"的所有元素*/
[title|=unoob] { color:blue; } /*title属性值以"runoob"开头的所有元素*/
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
常用属性
背景
- background-color
- background-image
- background-repeat
- background-attachment (fixed/scroll/inherit,背景图像是否固定或者随着页面的其余部分滚动)
- background-position
body {background-color:#ff0000;}
body {background-color:rgb(255,0,0);}
body {background-color:red;}
body {background-image:url('paper.gif');} /*默认情况下，背景图像进行水平/垂直平铺重复显示，以覆盖整个元素实体.*/
/*repeat-x 仅水平平铺*/
/*repeat-y 仅垂直平铺*/
body
{
background-image:url('gradient2.png');
background-repeat:no-repeat; /*不平铺*/
background-position:right top; /*改变图像在背景中的位置，默认与文本显示同一位置*/
}
/*背景简写属性*/
/*color image repeat attachment position*/
body {background:#ffffff url('img_tree.png') no-repeat right top;}
文本格式
- color
- text-align 对齐方式（相对于整个元素）
- text-decoration 设置或删除文本的装饰，主要是用来删除链接的下划线
- text-transform 文本转换（大小写、首字母大写）
- text-indent 文本缩进
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
a {text-decoration:none;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
p {text-indent:50px;}
字体
- font-family 字体系列
- font-style 字体样式(斜体)
- font-size 字体大小(绝对大小/相对大小)
- font-weight normal/lighter/bold
- font-variant nromal/small-caps
p{font-family:"Times New Roman", Times, serif;}
p.normal {font-style:normal;}
p.italic {font-style:italic;}
h1 {font-size:40px;}
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:100%;} /*<body>元素的默认字体大小的是百分比*/
链接
可用任何CSS属性修饰链接四个状态
a:link {color:#000000;text-decoration:none;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;text-decoration:underline;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
*注意顺序*
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
列表
/*列表项标记*/
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
/*指定列表项标记的图像*/
ul
{
list-style-image: url('sqpurple.gif');
}
/*相对元素，表项的位置*/
ul {list-style-position: inside;}
ul {list-style-position: outside;}
盒子模型
div {
width: 300px; /*内容Content的宽度*/
padding: 25px; /*内边距*/
border: 25px solid green; /*边框*/
margin: 25px; /*外边距，透明*/
}
显示与可见性
h1.hidden {visibility:hidden;} /*仍占据空间*/
h1.hidden {display:none;} /*不占据空间*/
li {display:inline;} /*转为内联元素*/
span {display:block;} /*转为块元素*/
定位
position属性，五个值
- static （默认值，没定位）
- relative （相对其正常位置，但它原本所占的空间不会改变）
- fixed （相对于浏览器窗口）
- absolute （相对于最近的已定位父元素/）
- sticky （依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换）
光标
复杂选择器
组合与嵌套选择器
h1,h2,p
{
color:green;
}
p /*为所有 p 元素指定一个样式*/
{
color:blue;
text-align:center;
}
.marked /*为所有 class="marked" 的元素指定一个样式*/
{
background-color:red;
}
.marked p /*为所有 class="marked" 元素内的 p 元素指定一个样式*/
{
color:white;
}
p.marked /*为所有 class="marked" 的 p 元素指定一个样式*/
{
text-decoration:underline;
}
组合选择器
CSS3中包含了四种组合方式:
div p /*后代选择器,选取所有插入到 <div> 元素中的 <p> 元素*/
{
background-color:yellow;
}
div>p /*子元素选择器，选择<div>元素中所有直接子元素 <p>*/
{
background-color:yellow;
}
div+p /*相邻兄弟选择器，选取了所有位于 <div> 元素后的第一个 <p> 元素*/
{
background-color:yellow;
}
div~p /*后续兄弟选择器，选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> */
{
background-color:yellow;
}
伪类
CSS伪类用来添加一些选择器的特殊效果
语法：
selector:pseudo-class {property:value;}
selector.class:pseudo-class {property:value;}
- 与CSS类配合使用（a标签）
- first-child伪类（选择所有作为第一个子元素的该元素）
- lang伪类（为不同语言定义特殊规则）
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
p:first-child /*匹配作为任何元素的第一个子元素的 <p> 元素*/
{
color:blue;
}
p:first-child i /*匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素*/
{
color:blue;
}
q:lang(no) {quotes: "~" "~";} /*为属性值为 no 的q元素定义引号的类型*/
伪元素
CSS伪元素是用来添加一些选择器的特殊效果
语法
selector:pseudo-element {property:value;}
selector.class:pseudo-element {property:value;}
- :first-line 用于向文本的首行设置特殊样式（只能用于块级元素）
- :first-letter 用于向文本的首字母设置特殊样式（只能用于块级元素）
- :before 在元素的内容前面插入新内容（默认同行）
- :after 在元素的内容后面插入新内容（默认同行）
同一/类元素可以结合多个伪元素
示例
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
p.article:first-letter {color:#ff0000;}
媒体类型
指定文件将如何在不同媒体呈现
@media规则
允许在相同样式表为不同媒体设置不同的样式
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
p.test {font-weight:bold;}
}
常用模板
CSS导航栏
<!DOCTYPE html>
<--全屏高度的固定垂直导航栏-->
<html>
<head>
<meta charset="utf-8">
<title>CSS教程</title>
<style>
body {
margin: 0;
}
ul {
list-style-type: none; /*不显示表项*/
margin: 0; /*删除边距*/
padding: 0; /*删除填充*/
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%; /*全屏高度*/
overflow: auto; /*如果导航栏选项多，允许滚动*/
}
li a {
display: block; /*显示块元素链接，让整体变为可点击的链接区域*/
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* 当前页面 */
li a.active {
background-color: #4CAF50;
color: white;
}
/* 鼠标移动到选项上修改背景颜色 */
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
<div style="margin-left:25%;padding:1px 16px;height:1000px;">
<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>
扫一扫
449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
