CSS,全称Cascading style sheets,层叠样式表。
====================================================
1、内联样式,在具体的标签上写样式。
2、内部样式,在head头里写样式<style type="text/css"></style>
3、外部样式,引入外部的css文件<link type="text/css" rel="stylesheet" href="demo.css">。
======================================================================================
语法:
选择器{属性:值}
选择器的分组,使用逗号分隔。
示例:h1,h2,h3{font-size:30px;}
*代表所有元素。
.代表类选择器。
#代表Id选择器。
后代选择器(任意一个后代,可以跨多代),使用空格,示例:
ul li{color:red;}
子元素选择器,使用>号,只能找到子元素,示例:
ul>li{color:red;}
相邻兄弟选择器,使用+号,示例:
ul+ol{text-align:center;}
属性选择器,使用[],示例:
a[href]{color:pink;}
a[href="www.baidu.com"]{color:blue;}
====================================================================================
css中的伪类:
语法:
选择器:伪类型{样式}
锚伪类:(未被访问状态、已被访问状态、鼠标悬停状态、活动状态)。
:link 未被访问的链接添加样式。
:visited 向已被访问链接添加样式。
:hover 向鼠标悬停时向元素添加样式。
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:first-child 向第一个子元素添加样式。
示例:
a:link{color:green} //未被点击的链接设置为绿色
a:visited{color:red} //已被点击的链接设置为红色
a:active{color:#ccc;}//点击和释放之间的样式
p:first-child{font-size:20px;}//设置第一个p标签
===================================================================================
css中的文本控制:
color 设置文本颜色;
direction 设置文本方向;(ltr 左到右,rtl右到左)
line-height 设置行高;
letter-spacing 设置字符间距;
word-spacing 设置字间距;
text-indent:缩进首行文本;(可以是正负数)
text-decoration 向文本添加修饰;(可以在文本下添加下划线、上划线,中划线)
text-align 对齐元素中的文本;
text-transform 控制元素中的字母。(可以实现设置单词首字母大写)
示例:
a{text-decoration:none}//去掉a链接的下划线
a{text-transform:capitalize;}//设置文本中的英文单词的首字母大写
====================================================================================
css中的字体控制:
font-family 定义文本的字体系列(通用系列:Serif、Sans-serif、Monospace、Cursive、Fantasy)。
font-style 规定斜体文本(normal、italic斜体、oblique倾斜)。
font-weight 设置文本的粗细(normal、blod、100~900)。
font-size 设置文本的大小(px/em/%)。
============================================================================================
css中的背景控制:
background-color 设置元素的背景颜色(三种方式:1、red,2、#ff0000,3、rgb(255,0,0))。
background-image 设置元素的背景图片。
background-repeat 设置是否或者如何重复背景图像(repeat/repeat-x/repeat-y/no-repeat)。
background-position 设置背景图像的起始位置(top、bottom、left、right、center、%、px)。
示例:
.list{background-image:url(images/1.png)}
=========================================================================================
css中的列表控制:
list-style-type 设置列表项标记的类型
(disc默认实心圆/none/circle空心圆/square/decimal数字/...);
list-style-image 使用图像来替换列表项的标记;
list-style-position 设置在何处方式列表项的标记;
list-style 符合写法。
示例:
.list{list-style-image:url(images/logo.png);}
.list{list-style-position:inside;}
符合写法,多个设置之间用空格隔开,inside是list-style-position的值。
.list{list-style:url(images/logo.png) inside;}
=========================================================================================
css中的链接样式:
color、font-size、text-decoration、font-family、font-weight...
:hover伪类
==========================================================================================
css中的表格样式:
border-style 用于设置元素的边框的样式
(dotted点状、solid实线、double双线、dashed虚线、...)
border-collapse 设置是否将表格边框折叠为单一边框(separate、collapse)
border-spacing 设置相邻单元格的边框间的间距(length length)
caption-side 设置表格标题的位置(top、bottom)
text-align 设置水平对齐方式(left、center、right)
vertical-align 设置垂直对齐方式(top、center、bottom)
示例:
边框可以设置一个、二个、三个、四个。
table{border-style:dotted solid double dashed;}//设置上下左右四个不同的边框
border-collapse属性会忽略掉border-spacing属性,不能一块用。
=========================================================================================
css中的常见伪元素:
:before 该伪元素定义在元素之前添加内容;
:after 该伪元素定义在元素之后添加内容;
:first-line 该伪元素向文本的首行添加特殊样式;
:first-letter 该伪元素向文本的第一个字母添加特殊样式。
示例:
h1:before{content:'hi hello';}//在h1的文本前插入内容
h1:before{content:url(images/1.png);}//在h1的文本前插入内容
========================================================================================
css的盒模型:
padding 内边距
margin 外边距
border 边框
element 元素
==========================================================================
css中的边框
border-style 设置边框的样式;
border-width 设置边框宽度(thin、medium、thick、length);
border-color 设置边框颜色;
border 设置边框属性。
设置其中一个边框:
border-top-style、border-bottom-style、border-left-style、border-right-style。
======================================================================================