层叠样式表：实现数据与样式分离
<style type="text/css">
</style>
/*
* 层叠样式表:实现数据与样式分离
这是CSS的注释
* */
font{
color: red;
font-family: 华文彩云;
font-size: 50px;
}
/*CSS的选择器
* ①:标签选择器:它作用于页面上所有的当前标签
* ②:类选择器:它作用于页面上所有的具有该属性值的标签
* ③:ID选择器:它作用于页面上具有该ID值的标签.注意:一般来讲,一个页面上不能出现ID值相同的情况
* ④:通用选择器:作用于页面上所有的标签
*
* */
/*标签选择器*/
p{
color: red;
}
/*类选择器*/
.one{
color: blue;
}
/*id选择器*/
#two{
color: purple;
}
/*通用选择器*/
*{
color: pink;
}
/*
①:组合选择器,使用逗号分隔多个选择器
②:后代选择器,作用于最里边的那个标签
③:动态伪类选择器:a:link a:visited
④:伪类选择器:
:hover 鼠标悬停
:active 点击激活
5:focus
* */
p,div,#ccc{
color: blue;
}
div p b{
color: pink;
}
a{
color: green;
}
/*设置超链接未被访问过的样式*/
a:link{
color: green;
}
/*设置超链接被访问过的样式*/
a:visited{
color: #cccccc;
}
/*伪类选择器*/
a:hover{
color: red;
}
div:hover{
border: 5px red solid;
}
/*伪类选择器*/
div:active{
color: orange;
}
input:focus{
border: 2px blue dotted（虚线）;
color: red;
}
CSS具有三种引入使用的方式
一:行级样式表
二:内部样式表,就是在head里边写的style标签
三:外部样式表,使用link标签引入外部.css文件
样式表冲突解决方案:就近原则
优先级别: id>class>标签
border:定义边框的线条颜色,大小和样式
outline:在边框外围再定义线条额颜色,大小和样式,用于突出元素
border-bottom-left-radius:10px;定义边框的圆角
p{
border: blue 5px solid;
outline: red 6px dotted;
border-bottom-left-radius: 10px ;
}
字体属性:
font-family:设置字体
font-size:字体大小
color:字体颜色
font-style:设置斜体
font-weight:设置粗体
div{
font-family: 华文彩云;
font-size: 100px;
color: blue;
font-style: italic;
font-weight: bold;
}
列表属性
list-style-type:设置列表的样式
list-style-image:自定义列表项的图标
ul{
list-style-type: none;
list-style-image: url(img/star.png);
}
margin:表示外间距
HTML元素的分类
三种 内联元素,它不会产生换行
块级元素,它是一块独立的区域,会换行
内联块元素,它是上边两个的结合
padding:内边距
表格属性
border-collapse:规定是否合并表格边框。
border-spacing:规定相邻单元格边框之间的距离。
caption-side:规定表格标题的位置。
文本属性
color:文本颜色
line-height:设置文本的行高
text-align:文本的水平居中方式
text-decoration:文本的装饰方式
text-transform:大小写转换
word-spacing:单词之间的间距
letter-spacing:字符间距
white-space:规定如何处理空白,如果值为nowrap,那么就不换行,直到遇到 <br>标签
overflow:规定如何处理文本溢出的情况, auto是让浏览器自动渲染,hidden 是隐藏
text-overflow: 属性规定当文本溢出包含元素时发生的事情,ellipsis是用 省略号来显示被隐藏的文本
定位属性
position:控制元素的定位属性
relative:相对定位
absolute:绝对定位,会让元素脱离顺序流
float:属性,它会让元素脱离顺序流
css中的单位：
PX:它并不像cm等等一样是定长的,它是一个相对单位.
%:它也是一个相对单位
background-color:设置背景色
background-image:设置背景图片
background-repeat:设置背景图片平铺的方向
background-attachment:设置背景图片是否跟着滚动
background-position:设置背景图片的位置
*
* */
body{
background-image: url(img/qiaoqiao.png);
background-repeat:no-repeat ;
background-attachment: fixed;
background-position: right bottom;
}
p{
background-color: red;
}