CSS小结
CSS css
37，文字样式 html
<style> 浏览器
p{ 布局
font-size:20px;/*设置文字字号*/ 字体
color:red;/*设置文字颜色*/ spa
font-weight:bold;/*设置字体加粗*/ orm
} htm
</style> 对象
38，修改指定样式 图片
<style type="text/css">
span{
color:blue;
}
</style>
<p>慕课网，<span>超酷的互联网</span> </p>
39,CSS代码语法
p{ //选择符
font-size:12px; //声明
color:red;
font-weight:bold;
}
被<p> </p>所包含文字能实现所要效果
40，代码注释
/*注释文字*/
41，内联式CSS样式
<p style="color:red;font-size:12px">这里文字是红色。</p>
42,外部式CSS
把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件连接到HTML文件内，以下面代码：
<link href="base.css" rel="stylesheet" type="text/css" />
1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置通常写在<head>标签以内。
43，三种方法的优先级
内联式 > 嵌入式 > 外部式。。离被设置元素越近优先级别越高）。
44，标签选择器：
<style>
body{ //选择的对象，那个标签包含的东西
font-size:12px;
color:blue;
}
</style>
类选择器：为选中的一段文字设置格式，在一个html文档中可使用屡次，设置多个样式
<span class=”text”> 选中字段 <span>
.text{
CSS样式代码
}
ID选择器 :在一个html文档中只能使用一次，只能设置一个样式
<span id=”stress” > 选中文本 </span>
#stress{
CSS式样
}
子选择器 //仅是第一代后代
.food>li{
} //类food 下为li的子元素实现CSS效果
后代选择器 //全部food类的后代
.food li{
}
通用选择器
*{
} //将html 下全部标签元素全都设置
伪类选择符
a:hover{ //标签为a鼠标滑过期的字体式样
color:red;
}
分组选择器
h 1,span { //为多个标签元素设置一个式样
}
45,行间距 : line-height:1.4em
字体粗细： font-weight:normal
边框：border：1px solid red; //边框粗细为1px，红色的实线
46,重要性
设置最高权值
p{color:red!important;}
p{color:green;}
47，文字排版
body{font-family:"微软雅黑";}
2，粗体 a{font-weight:bold;}
3斜体 a{font-style:italic;}
4 下划线a{text-decoration:underline;}
5删除线 text-decoration:line-through;
6，段落排版-缩进p{
text-indent:2em; //在段落前面空两个字的大小
}
7.行间距 p{line-height:2em;}
8，字间距、字母间距
letter-spacing:50px;
英文单词间距
word-spacing:50px;
9，段落排版-对齐:为块状元素中的文本、图片设置对齐格式
text-align:center; 居中
text-align:left; 居左
text-align:right ； 居右
10，背景色： backgroud：pink
48,元素
1） 转换为块级元素 a{display:block;}
2） 转为内联元素 display:inline
内联元素特色：
1、和其余元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
3)内敛块状元素
Display:inline-block
inline-block 元素特色：
1、和其余元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距均可设置。
49,盒模型
1）边框div{
border:2px solid red;
}
或
div{
border-width:2px;
border-style:solid;
border-color:red;
}
border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。
仅设置一个方向的边框样式
div{border-bottom:1px solid red;}
2) 填充：边框与内容之间
顺序：上右下左 (顺时针)
div{padding:20px 10px 15px 30px;}
3) 边界：元素与元素之间的距离
div{margin:20px 10px 15px 30px;} 顺时针
至关于 div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
总结一下：padding和margin的区别，padding在边框里，margin在边框外。
50,流动模型
在默认状态下，块状元素的宽度都为100%”。，独占一行
内联元素标签a、span、em、strong 从左到右水平分布
51，浮动模型
实现两个块状元素并排显示
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
<div id="div1"></div>
<div id="div2"></div>
52，层模型—绝对布局
相对与浏览器设置元素位置
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
层模型—相对定位：相对之前的位置移动
position:relative;
层模型-固定定位：相对于浏览器的视图，始终会在浏览器的某个位置不动，随滚动而滚动
ReLATIVE与Absolute组合使用:实现对选定参照系的相对位置移动
、参照定位的元素必须是相对定位元素的前辈元素：参照定位的元素必须加入position:relative; 、定位元素加入position:absolute，即可以使用top、bottom、left、right来进行偏移定位了。
53,盒模型代码的简写
一般有下面三种缩写方法:
1、若是top、right、bottom、left的值相同，以下面代码：
margin:10px 10px 10px 10px;
可缩写为：
margin:10px;
2、若是top和bottom值相同、left和 right的值相同，以下面代码：
margin:10px 20px 10px 20px;
可缩写为：
margin:10px 20px;
3、若是left和right的值相同，以下面代码：
margin:10px 20px 30px 20px;
可缩写为：
margin:10px 20px 30px;
注意：padding、border的缩写方法和margin是一致的。
54，颜色值缩写
十六进制：当设置的每两位颜色值相同能够缩写成一位
55，字体缩写
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}
这么多行的代码其实能够缩写为一句：
body{
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}
注意：
1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其余的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
56，颜色值
字体颜色 color
背景颜色 background-color
边框 border
1>、英文命令颜色
前面几个小节中常常用到的就是这种设置方法：
p{color:red;}
2>、RGB颜色
这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。
p{color:rgb(133,45,200);}
每一项的值能够是 0~255 之间的整数，也能够是 0%~100% 的百分数。如：
p{color:rgb(20%,33%,25%);}
3>、十六进制颜色
这种颜色设置方法是如今比较广泛使用的方法，其原理其实也是 RGB 设置，可是其每一项的值由 0-255 变成了十六进制 00-ff。
p{color:#00ffff;}
57,长度值
1> 像素
px
2> em
p{font-size:12px;text-indent:2em;} //首行缩进2个字体
若是字体大小为12px，那么1em=12px
3> 百分比
p{font-size:12px;line-height:130%}
若字体大小指定为12px,那么百分比就是以这个大小为基础的比值
58，水平居中
设置文本或者图片居中
<body>
<div class="txtCenter">我是文本，哈哈，我想要在父容器中水平居中显示。</div>
</body>
css代码：
<style>
div.txtCenter{
text-align:center;
}
</style>
水平居中设置-定宽块状元素
：为块状元素设置为居中
html代码：
<body>
<div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>
css代码：
<style>
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
width:500px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>
定宽与设置缺一不可
- 1. css 3D小结
- 2. CSS小总结
- 3. css 小总结
- 4. css 小结
- 5. css position小结
- 6. HTML & CSS 小总结
- 7. CSS效果小结
- 8. CSS重点小结
- 9. CSS 布局小结
- 10. css居中小结
- 更多相关文章...
- • jQuery Mobile CSS 类 - jQuery Mobile 教程
- • CSS 指南 - 网站建设指南
- • 算法总结-双指针
- • 算法总结-回溯法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. css 3D小结
- 2. CSS小总结
- 3. css 小总结
- 4. css 小结
- 5. css position小结
- 6. HTML & CSS 小总结
- 7. CSS效果小结
- 8. CSS重点小结
- 9. CSS 布局小结
- 10. css居中小结