CSS笔记
CSS笔记
- CSS
-
- CSS简介
-
- 什么是 CSS?
- 引用方式
-
- 内联样式表
- 内部样式表
- 外部样式表
- 多重样式优先级
- CSS 语法
-
- CSS 规则
- CSS 注释
- CSS 选择器
-
- id 和 class 选择器
-
- id 选择器
- class 选择器
- 标签选择器
- 属性选择器
-
- 属性和值选择器
- 属性和值的选择器 - 多值
- 表单样式
- 子选择器
- 相邻选择器
- 群组选取
- 伪类选择器(:hover)
- CSS Background(背景)
- CSS Text(文本)
-
- 文本颜色
- 字体样式(Font)
-
- 字体类型(font-family)
- 字体大小(font-size)
- 字体颜色(color)
- 字体粗细(font-weight)
- 字体斜体(font-style)
- 文本样式(Text)
-
- 下划线、删除线、顶划线(text-decoration)
- 文本大小写转换(text-transform)
- 文本首行缩进(text-indent)
- 文本水平对齐(text-align)
- 文本行高(text-height)
- 字符间距(letter-spacing)
- 字间距(word-spacing)
- 边框(Border)
-
- 边框样式(border-style)
- 边框宽度(border-width)
- 边框颜色(border-color)
- 边框简写(border)
- 背景(background)
-
- 背景颜色(background-color)
-
- color和background-color区别
- 背景图像(background-image)
- 图像显示方式(background-repeat)
- 背景图像位置(background-position)
-
- 像素值
- 关键字
- 背景固定样式(background-attachment)
- 超链接(Link)
-
- 链接样式
- 文本修饰
- 背景颜色
- 图片样式
-
- 图片大小
- 图片边框(border)
- 图片水平对齐(text-align)
- 图片垂直对齐(vertical-align)
- 文字环绕(float)
- 设置图片与文字的间距(margin)
- 列表样式(list style)
-
- 列表项符号(list-style-type)
-
- 有序列表(ul)
- 无序列表(ul)
- 自定义列表项符号(list-style-image)
- 表格样式()
-
- 表格边框合并(border-collapse)
- 表格边框间距(border-spacing)
- 表格标题位置(caption-side)
- 盒子模型(Box Model)
-
- 元素的宽度和高度
- 内边距(padding)
- 外边距(margin)
- 浮动布局
- 定位布局(Position)
-
- 固定定位(fixed)
- 相对定位(relative)
- 绝对定位(absolute)
- 静态定位(static)
- 教程参考与笔记
CSS
CSS简介
什么是 CSS?
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
注意： 样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
CSS/CSS3 API 中文文档
引用方式
内联样式表
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
head>
<body style="background-color:#b0c4de;">
<h1>我的 CSS web 页!h1>
<p>你好世界！这是来自 runoob 菜鸟教程的实例。p>
body>
html>
内部样式表
内部样式，指的就是把CSS代码和HTML代码放在同一个文件中，其中CSS代码放在
字间距(word-spacing)
定义词间距，以空格为基准进行调节，如果多个单词被连在一起，则被word-spacing视为一个单词；如果汉字被空格分隔，则分隔的多个汉字就被视为不同的单词，word-spacing属性此时有效。
p {
word-spacing:30px;
}
边框(Border)
详见参考
边框样式(border-style)
详见参考
边框宽度(border-width)
详见参考
边框颜色(border-color)
p.one {
border-style:solid;
border-color:red;
}
p.two {
border-style:solid;
border-color:#98bf21;
}
边框简写(border)
/*正常写法*/
border-width:5px;
border-style:solid;
border-color:red;
/*简写等效于如上*/
border:5px solid red;
对于border:1px solid gray;这种简洁写法，第一个值指的是框的大小（border-width），第二个值指的是框的样式（border-style），第三个值指的是框的颜色（border-color）。
背景(background)
详见参考
详见参考
| 属性 | 说明 |
|---|---|
| background-color | 定义背景颜色 |
| background-image | 定义背景图像的路径 |
| background-repeat | 定义背景图像显示方式，例如纵向平铺、横向平铺 |
| background-position | 定义背景图像在元素哪个位置 |
| background-attachment | 定义背景图像是否随内容而滚动 |
背景颜色(background-color)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>background-color属性title>
<style type="text/css">
/*设置所有div元素的共同样式*/
div {
width:100px;
height:60px;
}
/*设置3个div元素的个别样式*/
#div1{
background-color:red;}
#div2{
background-color: #F3DE3F;}
#div3{
background-color: #0AF7FB;}
style>
head>
<body>
<div id="div1">背景颜色值为reddiv>
<div id="div2">背景颜色值为#F3DE3F div>
<div id="div3">背景颜色值为#0AF7FB div>
body>
html>
color和background-color区别
#p1 {
width:290px;
/*指文字颜色*/
color:white;
/*背景色*/
background-color:red;
}
背景图像(background-image)
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
页面背景图片设置实例:
body {
background-image:url('paper.gif');}
默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，
图像显示方式(background-repeat)
详见参考
| 属性值 | 说明 |
|---|---|
| no-repeat | 表示不平铺 |
| repeat | 默认值，表示在水平方向（x轴）和垂直方向（y轴）同时平铺 |
| repeat-x | 表示在水平方向（x轴）平铺 |
| repeat-y | 表示在垂直方向（y轴）平铺 |
如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:
body {
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
让背景图像不影响文本的排版（如果你不想让图像平铺，你可以使用 background-repeat 属性）:
body{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。
可以利用 background-position 属性改变图像在背景中的位置:
body {
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
背景图像位置(background-position)
背景位置属性用于设置背景图像的位置，这个属性只能应用于块级元素和替换元素。其中替换元素包括img、input、textarea、select和object。
/**/
background-positon:像素值/关键字;
像素值
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>background-position属性title>
<style type="text/css">
#div1 {
width:400px;
height:300px;
border:1px solid gray;
background-image:url("../App_images/lesson/run_cj/one piece.jpg");
background-repeat:no-repeat;
background-position:80px 40px;
}
style>
head>
<body>
<div id="div1">div>
body>
html>
关键字
| 属性值 | 说明 |
|---|---|
| top left | 左上 |
| top center | 靠上居中 |
| top right | 右上 |
| left center | 靠左居中 |
| center center | 正中 |
| right center | 靠右居中 |
| bottom left | 左下 |
| bottom center | 靠下居中 |
| bottom right | 右下 |
背景固定样式(background-attachment)
设置背景图像是随对象滚动还是固定不动。
/*scroll表示背景图像随对象滚动而滚动，是默认选项；fixed表示背景图像固定在页面不动，只有其他的内容随滚动条滚动。*/
background-attachment:scroll/fixed;
超链接(Link)
链接样式
| 属性 | 说明 |
|---|---|
| a:link | 定义a元素未访问时的样式 |
| a:visited | 定义a元素访问后的样式 |
| a:hover | 定义鼠标经过显示的样式 |
| a:active | 定义鼠标单击激活时的样式 |
a:link {
color:#000000;} /* 未访问链接*/
a:visited {
color:#00FF00;} /* 已访问链接 */
a:hover {
color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {
color:#0000FF;} /* 鼠标点击时 */
/*注意： a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。*/
/*注意： a:active 必须在 a:hover 之后。*/
文本修饰
/*text-decoration 属性主要用于删除链接中的下划线：*/
a:link {
text-decoration:none;}
a:visited {
text-decoration:none;}
a:hover {
text-decoration:underline;}
a:active {
text-decoration:underline;}
背景颜色
a:link {
background-color:#B2FF99;}
a:visited {
background-color:#FFFF85;}
a:hover {
background-color:#FF704D;}
a:active {
background-color:#FF704D;}
图片样式
图片大小
/*语法*/
width:像素值;
height:像素值;
图片边框(border)
/*语法*/
border-width:像素值;
border-style:属性值
border-color:颜色值
/*如上简写*/
border:1px solid red;
图片水平对齐(text-align)
text-align一般只用在两个地方：文本水平对齐和图片水平对齐。也就是说，text-align只对文本和img标签有效，对其他标签无效。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图片水平对齐title>
<style type="text/css">
div
{
width:300px;
height:80px;
border:1px solid gray;
}
.div_img1{
text-align:left;}
.div_img2{
text-align:center;}
.div_img3{
text-align:right;}
img{
width:60px;height:60px;}
style>
head>
<body>
<div class="div_img1">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
div>
<div class="div_img2">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
div>
<div class="div_img3">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
div>
body>
html>
图片垂直对齐(vertical-align)
| vertical-align属性取值 | 说明 |
|---|---|
| top | 顶部对齐 |
| middle | 中部对齐 |
| baseline | 基线对齐 |
| bottom | 底部对齐 |
文字环绕(float)
| loat属性值 | 说明 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
设置图片与文字的间距(margin)
/*上外边距*/
margin-top:像素值;
/*下外边距*/
margin-bottom:像素值;
/*左外边距*/
margin-left:像素值;
/*右外边距*/
margin-right:像素值;
列表样式(list style)
列表项符号(list-style-type)
/*语法*/
list-style-type:属性值;
/*去除列表项符号*/
list-style-type:none;
有序列表(ul)
| list-style-type属性值 | 说明 |
|---|---|
| decimal | 默认值，数字1、2、3…… |
| lower-roman | 小写罗马数字i、ii、iii…… |
| upper-roman | 大写罗马数字I、II、III…… |
| lower-alpha | 小写英文字母a、b、c…… |
| upper-alpha | 大写英文字母A、B、C…… |
无序列表(ul)
| list-style-type属性值 | 说明 |
|---|---|
| disc | 默认值，实心圆“●” |
| circle | 空心圆“○” |
| square | 实心正方形“■” |
自定义列表项符号(list-style-image)
不管有序列表还是无序列表，都有他们自身的列表项符号。但默认的列表符号都比较丑。使用自定义列表项符号。
/*语法*/
list-style-image:url(图像地址);
表格样式()
表格边框合并(border-collapse)
表格特有的属性。除了表格，其他地方用不上。 详见参考 浮动布局比较灵活，但是不容易控制。而定位布局的出现，使得用户精准定位页面中的任意元素成为可能，使得网页布局变得更加随心所欲。当然由于定位布局缺乏灵活性，也给空间大小和位置不确定的版面布局带来困惑。 绝对定位在几种定位方法中使用最广泛，这种方法能够很精确地把元素移动到任意你想要的位置。 如果没有指定元素的 CSS实例
只需要在元素中设置
border-collapse属性值就行，没必要在、 这些元素也设置，造成代码冗余。
border-collapse属性值
说明
separate
默认值，边框分开，不合并
collapse
边框合并，如果相邻，则共用一个边框
表格边框间距(border-spacing)
/*语法*/
border-spacing:像素值;
/*定义了单元格之间水平方向的间距为5px，垂直方向的间距为10px。*/
{
border-spacing:5px 10px}
表格标题位置(caption-side)
caption-side属性值
说明
top
默认值，标题在顶部
bottom
标题在底部
盒子模型(Box Model)
详见参考
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
属性
说明
border
（边框）元素边框
margin
（外边距）用于定义页面中元素与元素之间的距离
padding
（内边距）用于定义内容与边框之间的距离
content
（内容）可以是文字或图片
元素的宽度和高度
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
<style>
div {
/*背景颜色*/
background-color: lightgrey;
/*宽*/
width: 300px;
/*边框：宽度25px;样式实线;颜色green;*/
border: 25px solid green;
/*内容与边框之间的距离*/
padding: 25px;
/*元素与元素之间的距离*/
margin: 25px;
}
style>
head>
<body>
<h2>盒子模型演示h2>
<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。p>
<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。div>
body>
html>
内边距(padding)
/*语法*/
padding-top:像素值;
padding-right:像素值;
padding-bottom:像素值;
padding-left:像素值;
/*简洁写法*/
padding:像素值;
padding:像素值1 像素值2;
padding:像素值1 像素值2 像素值3 像素值4;
/*表示四个方向的内边距都是20px*/
padding:20px;
/*表示padding-top和padding-bottom为20px，padding-right和padding-left为40px。*/
padding:20px 40px;
/*表示padding-top为20px，padding-right为40px，padding-bottom为60px，padding-left为80px。大家按照顺时针方向记忆就可以了。*/
padding:20px 40px 60px 80px;
外边距(margin)
/*语法*/
margin-top:像素值;
margin-right:像素值;
margin-bottom:像素值;
margin-left:像素值;
/*简洁写法*/
margin:像素值;
margin:像素值1 像素值2;
margin:像素值1 像素值2 像素值3 像素值4;
/*表示四个方向的外边距都是20px*/
margin:20px;
/*表示margin-top和margin-bottom为20px，margin-right和margin-left为40px。*/
margin:20px 40px;
/*表示margin-top为20px，margin-right为40px，margin-bottom为60px，margin-left为80px。大家按照顺时针方向记忆就可以了。*/
margin:20px 40px 60px 80px;
浮动布局
定位布局(Position)
定位的方法有很多种，它们分别是固定定位（fixed）、相对定位（relative）、绝对定位（absolute）和静态定位（static）。
position 属性的五个值：
固定定位(fixed)
/*语法*/
position:fixed;
top:像素值;
bottom;像素值;
left:像素值;
right:像素值;
/*position:fixed;”是结合top、bottom、left和right这4个属性一起使用的，其中“position:fixed;”使得元素成为固定定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。*/
相对定位(relative)
/*语法*/
position:relative;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;
/*“position:relative;”是结合top、bottom、left和right这4个属性一起使用的，其中“position:relative;”使得元素成为相对定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对原始位置。相对定位的容器浮上来后，其所占的位置仍然留有空位，后面的无定位元素仍然不会“挤上来”。*/
绝对定位(absolute)
一个元素变成了绝对定位元素，这个元素就完全脱离正常文档流了，绝对定位元素的前面或者后面的元素会认为这个元素并不存在，即这个元素浮于其他元素上面，它是独立出来的。/*语法*/
position:absolute;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;
静态定位(static)
position属性值，也就是默认情况下，元素是静态定位。只要是支持position属性的html对象都是默认为static。static是position属性的默认值，它表示块保留在原本应该在的位置，不会重新定位。
说白了，平常我们根本就用不到“position:static”，不过呢，如果有时候我们使用javascript来控制元素定位的时候，如果想要使得其他定位方式的元素变成静态定位，就要使用“position:static;”来实现。
在CSS入门阶段，大家只需要深入学习固定定位（fixed）、相对定位（relative）和绝对定位（absolute）就已经可以走得很远了。教程参考与笔记
CSS教程
CSS教程你可能感兴趣的:(CSS,CSS,CSS选择器,CSS属性,布局)