CSS属性值中的单位
1.绝对单位
很少使用但在某些特殊场合下也是必要的。
英寸(in),厘米(cm),毫米(mm),磅(pt)。
2. 相对单位
1.em表示元素的字体高度,它能根据字体的大小来确定单位的大小。
2.ex表示小写字母x的高度。
3.px根据屏幕的像素点来确定。
4.%是一个相对单位值。
CSS字体样式(只介绍不常见的)
1.font-style字样
属性值:normal/italic/oblique 默认值/斜体显示文字/倾斜字体
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font-style</title>
<style type="text/css">
#p1{font-size:20px;font-style:normal;font-family:宋体;}
#p2{font-size:200%;font-style:italic;font-family:楷体,隶书;}
#p3{font-size:x-small;font-style:oblique;font-family:楷体,宋揩体;}
</style>
</head>
<body>
<p id="p1">这是默认字体</p>
<p id="p2">这是字体倾斜显示</p>
<p id="p3">这是倾斜字体</p>
</body>
</html>
2.字体变体font-variant不重要。
CSS精细排版样式
1.letter-spacing:normal | 长度单位
2. line-height:normal | 比例 | 长度单位 | 百分比
3. text-indent:长度单位 | 百分比单位
4. text-decoration:none | underline | overline | line-through(字符修饰符,下划线,顶线,删除线,文字闪烁……)
5. text-transform:uppercase | lowercase | capitalize[首字母大写]| none
6. text-align:left | right | center | justify(两端对齐)
7.vertical-align:top|middle|bottom(竖直对齐)
CSS背景与颜色
1.background-color:关键字 | RGB值 | transparent
2.background-image : url(*.jpg) | none
3.background-attachment : scroll | fixed(图片是否随页面移动)
4.background-repeat : repeat | repeat-x | repeat-y |no-repeat(背景图片是否重复)
5.background-position:百分比 | 长度 | 关键字
CSS列表样式
代码如下:
<body style="background-color: #cad9ea;
background-image: url(CSS文件/Pictures/学习.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed">
<h1 class="h1">Web前端开发技术<br>
--HTML5,CSS3,JavaScript</h1><br>
<!--用段落展示教学大纲-->
<!-- 改进用列表展示教学大纲-->
<h2 align="center" style="font-family: 隶书 ;font-size: 34px">教学大纲浏览:</h2>
<ul class="p1">
<li>计算机发展的历史:</li>
<ol>
<li>大型机</li>
<li>小型机</li>
<li>服务器</li>
<li>PC机</li>
<li>手机</li>
<li>智能设备</li>
</ol>
<li>程序设计语言:</li>
<ol>
<li>C++</li>
<li>Java</li>
<li>JavaScript</li>
<li>Python</li>
<li>其他语言</li>
</ol>
<li>应用系统:</li>
<ol>
<li>单机系统</li>
<li>分布式结构</li>
<li>嵌入式结构</li>
</ol>
<li>计算模式:</li>
<ol>
<li>分布式计算</li>
<li>微服务</li>
</ol>
</ul>
<ul class="p1">
<p>分布式应用框架:</p>
<li>服务器</li>
<ol>
<li>J2EE</li>
<li>.net</li>
<li>nodeJs</li>
</ol>
<li>前端交互</li>
<ol>
<li>客户端(JAVA, C客户端)</li>
<li> Web前端技术</li>
<li>APP (ISO,安卓)</li>
<li>微信小程序、微信公众号</li>
</ol>
</ul>
<ul class="p1">
<p>Web前端技术:</p>
<li>基础</li>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<li>技术重点</li>
<ol>
<li>基本语法</li>
<li>编程模式 ---渲染、事件、数据交互,服务请求方式,数据传输方式(JSON)</li>
<li>组件、函数库</li>
</ol>
<li>应用开发框架</li>
<ol>
<li>Jquery</li>
<li>React</li>
<li>vue</li>
<li>JSF</li>
</ol>
<li>应用场景</li>
<ol>
<li>静态网站</li>
<li>业务管理系统</li>
<li>电商</li>
<li>新媒体等系统</li>
<li>数据分析展示系统</li>
<li>Web2D,3D</li>
</ol>
<li>设计相关问题</li>
<ol>
<li>美工设计、风格设计</li>
<li>可用性设计、用户体验</li>
</ol>
</ul>
CSS盒模型
1.什么是CSS盒模型? W3C组织就建议把所有网页上的对象都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对象包括段落、列表、标题、图片以及层。
2.盒子模型的重要概念:盒模型主要定义四个区域MBPC:边界(margin) 、边框(border) 、填充(padding)和内容(content) 。
填充又叫内边界是内容(content)与边框的距离,边框又称外边界是盒子与边界的距离。
大体图片:
3.margin边界:
margin-top:20px; margin-right :20px;
margin-bottom :20px; margin-left :20px;
margin:10px; /* 4个边均为10px /
margin:10px 20px ; / 上下|左右*/
margin:10px 20px 30px; /* 上|右左|下*/
margin:10px 20px 30px 40px; /* 上|右|下|左*/
/*margin是指距离上一个元素的距离*/
#p1{background:#99ffcc;margin-top:200px;margin-left:200px;}
#p2{background:#99ffff;margin:20px 3px 20px;}
4.border边框
border-width: thin、medium、thick 、length ;
border-style :none|dotted|dashed| solid|double|groove[凹型线]|ridge [凸型线] |inset [嵌入线] |outset [嵌出线];
–复合属性,分top、right、bottom、left四个子属性。
border-color: 颜色关键字 | RGB值 ;
border(复合属性):边框粗细 边框样式 边框颜色;
<style type="text/css">
/*border复合属性可以一次性设计边框的粗细,风格和颜色*/
#p1{background:#99ffcc;border:15px #33ff66 groove;}
#p2{border-style: dashed solid;}
#p3{border-style:solid;border-width:8px 10px;}
</style>
5.padding填充属性(内容content距离边框的距离)
padding:长度 | 百分比
padding-top、padding-right、padding-bottom:同上
padding:20px 30px 40px 60px;/**/
padding:20px 30px 40px; /* 上|右|下|左*/
padding:20px 30px; /* 上|左右|下*/
padding:20px; /* 上右下左均相同*/
<style type="text/css">
#p1{background:#99ffcc;padding:15px 20px 15px;}
#p2{background:#99ff99;border-style:dashed;padding-top:0px;padding-bottom:20px;}
#p3{background:#99cccc;border-style:solid;padding-left:50px;padding-right:20px;}
</style>