文章目录
前端
提示:这里可以添加本文要记录的大概内容:
例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。
一、CSS基础
1.CSS概述
(1)CSS样式
•CSS指的是层叠样式表(Cascading Style Sheets),也称级联样式表
•内容和样式相分离,便于修改样式
•外部样式表存储在 CSS 文件中
(2)CSS语法
CSS 规则集(rule-set)由选择器和声明块组成:
CSS 选择器
•选择器指向需要设置样式的 HTML 元素。
•声明块包含一条或多条用分号分隔的声明。
•每条声明都包含一个 CSS 属性名称和一个值,以冒号分隔。
•多条 CSS 声明用分号分隔,声明块用花括号括起来。
(示例):
<body>
<p>天使投资指早期投资,尤其指个人早期投资。</p>
<p> VC,Venture Capital,所谓风险投资、创业投资,是相对靠
前的非公开市场股权投资</p>
<p> PE,Private Equity,所谓私募资本、非公开市场资本,既是
私募股权投资的统称,又特指相对靠后的股权投资。</p>
</body>
p{ //选择器
font-size:12px; /*字号*/
color:blue; /*文字颜色*/
font-weight:bold; /*加粗*/
//属性名 属性值
注意
•最后一条声明可以没有分号,但是为了以后修改
方便,一般也加上分号。
•为了使用样式更加容易阅读,可以将每条代码写
在一个新行内
(3)CSS添加方法
(示例):
1.行内 < p style >
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p style = “color:red;”>
天使投资指早期投资,尤其指个人早期投资。
</p>
</body>
</html
2.内嵌样式 < style >
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p{
color:red; /*设置字体颜色*/
}
</style>
</head>
<body>
<p>天使投资指早期投资,尤其指个人早期投资。</p>
</body>
</html>
注意
• 即使有公共CSS代码,也是每个页面都要定义的
• 适合文件很少,CSS代码也不多的情况
• 如果一个网站有很多页面,每个文件都会变大,后期维护难度也大
3.单独文件 < link >
外部样式表文件:style.css
p{
color:red;/*设置文字颜色*/
}
网页文件:1.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<p>天使投资指早期投资,尤其指个人早期投资。</p>
</body>
</html>
优点
•页面结构HTML代码与样式CSS代码完全分离
•维护方便
•如果需要改变网站风格,只需要修改公共CSS文件
•可以在同一个HTML文档内部引用多个外部样式表
4.优先级
• 多重样式可以层叠,可以覆盖
• 样式的优先级按照 “就近原则” :
• 行内样式> 内嵌样式> 链接样式> 浏览器默认样式
(示例):
• 外部样式表文件
h3{
color:red;
text-align:left;
font-size:8pt;
}
• 内嵌样式
h3{
text-align:right;
font-size:20pt;
}
二、CSS选择器
1.选择器
CSS选择器可以分为三大类,即id选择器、class选择器、标签选择器。它们之间可以有多种组合,有后代选择器、子选择器、伪类选择器、通用选择器、群组选择器等。
(1)标签选择器
(示例):
CSS
<style type="text/css">
body{background-color: #ccc;
text-align:center;
font-size:12px; }
h1 {font:“黑体";font-size:20px;}
p {color:red; font-size:16px;}
hr {width:200px;}
</style>
HTML
<body>
<h1>标题</h1>
<hr>
<p>正文的段落</p>
版权所有
</body>
(2)类别选择器
(示例):
CSS
<style type="text/css">
p { font-size:12px; }
.one{ font-size:18px; }
.two{font-size:24px; }
</style>
HTML
<body>
<p class="one">类别1</p>
<p class="one">类别1</p>
<p class="two">类别2</p>
<p class="two">类别2</p>
<p>普通段落中的文字</p>
</body>
(3)ID选择器
(示例):
CSS
<style type="text/css">
#one{font-size:12px;}
#two{font-size:24px;}
</style>
HTML
<body>
<p id="one">文字1</p>
<p id="two">文字2</p>
</body>
与class的区别唯一性
2.声明
(1)嵌套声明
(示例):
CSS
<style type="text/css">
p □ span{
color:red;
}
</style>
HTML
<body>
<p> <span>天使投资</span> 是投资方式的一种</p>
</body>
(2)集体声明
(示例):
CSS
<style type="text/css">
h1,p { text-align:center;
}
</style>
HTML
<body>
<h1>欢迎访问论坛</h1>
<p>欢迎访问论坛</p>
</body>
(3)全局声明
(示例):
CSS
<style type="text/css">
* {
text-align:center;
}
</style>
HTML
<body>
<h1>欢迎访问论坛</h1>
<p>欢迎访问论坛</p>
<h2>欢迎访问论坛</h2>
</body>
三、CSS常用属性
CSS属性有:字体属性(font)、背景属性(background)、区块属性(block)、方框属性(box)、边框属性(border)、列表属性(list-style)、定位属性(position)等。
1.文本
1.单位
px:像素
em:1em——1个字符;2em——两个字符
%:百分比
2.颜色
red,blue,green
颜色名http://www.w3school.com.cn/cssref/css_colors_legal.asp
rgb(x,x,x)
RGB 值
每个颜色分量取值0-255
红色:rgb(255,0,0)
灰色:rgb(66,66,66)
rgb(x%, x%, x%)
RGB 百分比值 0%-100%
红色:rgb(100%,0%,0%)
rgba(x,x,x,x)
RGB 值,透明度
a值:0.0(完全透明)与 1.0(完全不透明)
红色半透明:rgba(255,0,0,0.5)
#rrggbb
十六进制数
红色: #ff0000
红色: #f00 去掉重复位
3.字符间距 letter-spacing
(示例):
CSS
<style>
h1 {letter-spacing:2px;}
h2 {letter-spacing: -3px;}
</style>
HTML
<body>
<h1>标题内容</h1>
<h2>文本段落主要内容</h2>
</body>
4.行高 line-height
(示例):
CSS
<style>
p{font-size: 14px;
line-height: 2em;
}
</style>
HTML
<body>
<p>
这里是web前端开发课程…
</p>
</body>
5.对齐方式 text-align
(示例):
CSS
<style>
h1{text-align: center }
.date{text-align: right}
.main{text-align: justify}
</style>
HTML
<h1>CSS text-align 实例</h1>
<p class="date">3 月 14 号</p>
<p class=“main”>“当我年轻的时候,。。。</p>
6.装饰线 text-decoration
(示例1):
CSS
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>
HTML
<body>
<h1>标题1文字</h1>
<h2>标题2文字</h2>
<h3>标题3文字</h3>
</body>
(示例2):
CSS
<style type="text/css">
a{
text-decoration: none;
}
</style>
HTML
<body>
<ul>
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
<li><a href="#">链接3</a></li>
</ul>
</body>
去掉超链接下划线
7.字体 font
(示例):
简化font
font: 斜体 粗体 字号/行高 字体
font: italic bold 16px/1.5em '宋体';
2.背景与超链接
(1)背景属性
空元素需要先定义元素的高度和宽度
background
颜色 图片 repeat
background-color
background-image
url(“logo.jpg”)
background-repeat
repeat
repeat-x
repeat-y
no-repeat
(2)超链接
链接的四种状态
a:link- 普通的、未被访问的链接
a:visited-用户已访问的链接
a:hover -鼠标指针位于链接的上方悬停
a:active -链接被点击的时刻
鼠标悬停放大字体
CSS
a{
font-size: 22px;
}
a:hover{
font-size: 120%;
}
HTML
<a href="#">web design</a>
3.列表与表格
(1)列表
无序列表ul有序列表ol
共用样式
list-style所有用于列表的属性
设置于一个声明中
list-style-image为列表项标志设置图像
list-style-position标志的位置
CSS
<style type="text/css">
.inside {
list-style-position: inside
}
.outside {
list-style-position: outside
}
</style>
HTML
<ul class="inside">
<li>HTML——网页结构</li>
<li>CSS——网页样式</li>
<li>JS——网页交互</li>
</ul>
<ul class="outside">
<li>HTML——网页结构</li>
<li>CSS——网页样式</li>
<li>JS——网页交互</li>
</ul>
list-style-type 标志的类型
(2)表格
width
height
border
border-collapse
奇偶选择器:nth-child(odd|even)
tr:nth-child(odd){
background-color:#EAF2D3;
}
表示:tr的父元素table的奇数个子元素,不管这些子元素是tr还是th
四、盒子模型
1.盒子模型概述
页面上 区域、图片、导航、列表、段落,都可以是盒子
页面中的所有元素都可以看成一个盒子,占据着一定的页面空间
盒子模型组成
content内容
height高度、width宽度、border边框、padding内边距、margin外边距(CSS样式属性)
一个盒子的实际宽度、高度:content+padding+border+margin
CSS
<html>
<head>
<style type="text/css">
#box{
width:100px;
height:100px;
border:1px solid;
padding:20px;
margin:10px;
}
</style>
</head>
HTML
<body>
<div id="box">
内容内容内容…
</div>
</body>
</html>
2.盒子模型属性
(1)overflow属性
hidden超出部分不可见
scroll显示滚动条
auto如果有超出部分,显示滚动条
当内容溢出盒子框时,overflow属性取值
(2)border属性
border-width:px、 thin、medium、thick
border-style:dashed、dotted、solid、double
border-color:颜色
border:width style color
div{
border-width:2px;
border-style:solid;
border-color:red;
}
div{
border:2px solid
red;
}
div{
border-bottom:1px
solid red;
}
水平分割线
CSS
.line {
height:1px;
width:500px;
border-top:1px solid #e5e5e5;
}
(3)padding属性
CSS padding 属性定义元素边框与元素内容之间的空白区域,不可见。如果想调整盒子的大小可以调整内容区,内边距,边框。
CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值,但不允许使用负值。
(4)margin属性
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div{
width:100px;
height:100px;
margin:15px 10px 20px 30px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2</div>
</body>
</html>
margin的合并:垂直方向合并,水平方向不合并
水平居中
图片、文字水平居中 text-align:center;
div水平居中 margin:0 auto;
(示例):
CSS
#newsimglist{
text-align:center;
font-size:0; /*否则图间有空隙*/
}
#newsimglist img{
height:100px;
width:100px;
margin-left:5px;
border:1px solid #0cf;
padding:5px;
}
HTML
<div id="newsimglist">
<img src = "images/crisis.jpg" />
<img src = "images/crisis.jpg" />
<img src = "images/crisis.jpg" />
</div>
CSS
#newsimglist{
font-size:0; /*否则图间有空隙*/
}