本文详细介绍了CSS的基本语法，包括引用样式、选择器、超链接状态、伪元素选择器及各种属性，如颜色、字体、背景、定位等。通过实例展示了如何设置行内样式、内部样式和外部样式，以及如何利用CSS实现元素的尺寸、边框、内边距、外边距和浮动效果。此外，还探讨了文本属性和背景属性的设置，以及列表和定位的相关知识。
目录
list-style-image绝对定位和相对定位relative 和absolute
基本语法
<head>
<style>
选择器{
属性名：属性值;
属性名：属性值;
}
</style>
</head><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color:red;
background: #cccccc;
}
h2{
color:blue;
}
</style>
</head>
<body>
<p>CSS从入门到精通</p>
<h2>主讲：hector</h2>
</body>
</html>
引用样式（行内样式>ID选择器>类选择器>标签选择器）
行内样式
<p style="font-size: 18px;">行内样式</p>内部样式（head）
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color:red;
background: #cccccc;
}
h2{
color:blue;
}
</style>
</head>
外部样式（link）
导入
<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">
<style>
/* @import "style/hello.css" */
@import url(style/hello.css);
</style>.main{
color = red
background = **
}选择器（id# 类. 标签p）
超链接四种状态（active..）
- :link 未访问的链接
- :visited 已访问的链接
- :hover 鼠标悬浮到连接上，即移动在连接上
- :active 选定的链接，被激活
a:link,a:visited{
color:#666666;
font-size: 13px;
text-decoration: none;
}
a:hover,a:active{
color:#ff7300;
text-decoration: underline;
}
/*普通的标签也可以使用伪类选择器*/
p:hover{
color:red;
}
p:active{
color:blue;
}
伪元素选择器
- :first-letter 为第一个字符的样式
- :first-line 为第一行添加样式
- :before 在元素内容的最前面添加的内容，需要配合content属性使用
- :after 在元素内容的最后面添加的内容，需要配合content属性使用
p:first-letter{
color:red;
font-size:30px;
}
p:first-line{
background:pink;
}
p:before{
content:"嘿嘿";
}
p:after{
content:"哈哈";
}
div属性
width 宽度
height 高度
border 边框
padding 内边距
margin 外边距
boder 边框
border:1px solid red;分为四个方向：
- 上top、右right、下bottom、左left
- border-top、border-right、border-bottom、border-left
浮动（float）
left right top buttom
字体属性
font-weight
- normal普通（默认）
- bold粗体
font-family
font-style
- normal普通
- italic斜体
顺序
font-style-->font-weight-->font-size-->font-family
文本属性
颜色（color）
行高（line-height)
水平对齐方式（text-align）
垂直对齐方式（vertical-align）
首行缩进 text-indent
文本修饰 text-decoration
字母大小写转换 text-transform
字符间距 letter-spacing
单词间距 word-spacing（只对英文有效）
空白的处理方式 white-space
背景属性
background-color
background-image
- 必须使用url()方式指定图片的路径、
background-image: url(image.jpg);background-repeat
repeat(默认)，repeat-x，repeat-y,no-repeat
background-repeat: repeat; /* 默认值，在水平和垂直方向平铺 */
background-repeat: no-repeat; /* 不平铺。图片只展示一次。 */
background-repeat: repeat-x; /* 水平方向平铺(沿 x 轴) */
background-repeat: repeat-y; /* 垂直方向平铺(沿 y 轴) */
background-repeat: inherit; /* 继承父元素的 background-repeat 属性*/background-position（上右下左）
top、bottom、left、right、center
/* 例 1: 默认值 */
background-position: 0 0; /* 元素的左上角 */
/* 例 2: 把图片向右移动 */
background-position: 75px 0;
/* 例 3: 把图片向左移动 */
background-position: -75px 0;
/* 例 4: 把图片向下移动 */
background-position: 0 100px;background-attachment（背景附着）
background-attachment 属性决定用户滚动页面时图片的状态。三个可用属性为 scroll(滚动)，fixed(固定) 和 inherit(继承)。inherit 单纯地指定元素继承他的父元素的 background-attachment 属性。
列表属性
list-style-type
list-style:none;list-style-position
list-style-image
绝对定位和相对定位relative 和absolute
.parent{
background-color: yellow;
height:200px;
width:200px;
display: inline-block;
}
.child1{
background-color: green;
height:100px;
width:100px;
}
.child2{
background-color: royalblue;
height:50px;
width:50px;
}
.neighboor{
background-color: pink;
height:200px;
width:200px;
display: inline-block;
}
3667
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
