CSS三种样式:
内联式 例:<p style="color:blue">
嵌入式 例:<style type = "text/css"> xxxx </style>
外部式 例:<link href="CSS文件" rel="stylesheet" type="text/css">
如果三种样式同时存在并且对同一标签进行同属性操作, 比如内联效果为A 嵌入B 外部C 那么显示的效果为A, 优先级为 内联>嵌入>外部
选择器:
<p class="class1"> CSS中 .class1为选中这个p标签,.称为类选择器
<p id="id1"> #class1选中p标签,称为id选择器
id选择器与类选择器的区别: id选择器在文档内只能使用一次,同一个文档不能有两个相同的ID 而类选择器可以有相同的类名 类选择器可以使用列表 例: class"c1 c2" .c1 .c2都是
后代选择器:
有标签 <div class="class1"> <span><a></a></span> </div>
那么 .class1>span只包含 span标签 不包含a标签(一代)
如果 .class1 span 则包含了span 以及a标签
伪类选择符:
a:hover{color:red;} 表示鼠标滑过标签a时,字体显示红色
CSS文件中:
如果为同一个标签设置多种样式,那么按照 权值最高的来确定显示哪个样式 组合的权值相加计算
标签名 权值1 :例 p{ }
类选择器 权值 10: 例 .class{}
id选择器 权值 100: 例 #id{}
如果在设置属性时 在分号前增加 !important 那么这个属性的优先级总是大于其他样式
文本属性:
font-family:"宋体",sans-serif; 字体设置
text-decoration:underline; 下划线 line-through; 删除线
text-indent:2em; 段落缩进
line-height:2em; 行间距
letter-spacing:50px; 设置字母间距
word-spacing:50px; 设置单词间距
text-align: center; 对齐 居中 left right 左对齐 右对齐
font-size:字体大小
font-style:italic 设置斜体
font-weight:bold 字体加粗
font-variant:small-caps 段落设置为小型大写字母
line-height: 行间距
标签的种类:
块状元素: <div> <p> <h1>-<h6> <ol> <ul> <dl> <table> <address> <blockquote> <form>
特点:每个块级元素都从新的一行开始,并且其后的元素也另起一行,
元素的高度,宽度,行高以及顶部和底部间距都可以设置,元素宽度在不设置的情况下,是它本身父容器的100%。
内联元素: <a> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code>
特点:不能设置高度 宽度, 多个行内元素排成一行,直到一行排不下才会另起一行。只能设置水平方向间距 margin-left,right,padding-left,padding-right.
内联块状元素:<img> <imput>
元素种类转化:
a{display:block} 把a标签转化为块级元素
display:inline-block 把内联元素转化为块级元素 让元素可以在同一行显示,并且可以设置宽高边距。
盒子模型:
div p hi ol ul table都可以是盒子模型 例:
div{ width:200px; padding:20px; border:1px solid red; margin:10px}
border为边框 1px为边框的粗细 两个边框之间的距离为margin, padding为边框内对象到边框距离。
border: 2px solid red; 分别为设置 border-width border-style border-color属性
border-style 边框样式: dashed虚线 dotted点线 solid实线
border-color 边框颜色
border-width: 边框宽度 thin|medium|thick 一般用px单位来表示
CSS布局模型
1.流动模型(默认的网页布局模式)
2个典型的特点:
块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%
内联元素都会在所处的包含元素内从左到右水平显示
2.浮动模型
float:left: 可以使两个块状元素并排显示
3.层模型
层模型有三种形式
1.绝对定位
position:absolute
原来的位置去除,空间会被其他标签所占据
2.相对定位
position:relative
原来的位置还在,不会被其他标签占据
3.固定定位
position:fixed
浮动在浏览器窗口,不会因为滚动条滚动而看不到。
当父级元素position设置为relative时, 子元素设置absolute,则子元素相对参照物为父级元素,而不是浏览器窗口。
颜色的几种设置方式:
color:red; green blue 等等
color:rgb(133,33,33);
color:(20%,30%,40%);
color:#00ffff;
color:#off 当每两个数字相同时,可以缩写成这个形式, 这个跟上一行效果相同