CSS基础知识(2 css)
前端知识:
w3c组织:规范了html,css,javascript(js)写法
html:结构化标准
css:网页的样式(美化网页的)
javascript:行为化标准
(如果说html是盖了一栋房子 CSS则是完成房子的装修 javascript 是完成房子的功能 例如 能开灯等等)
CSS:全称:Cascading style sheet:层叠样式表
CSS的使用有三种方式:
1) 行内样式
标签 style属性:指定样式
弊端:style属性它和html标签混合使用,不利于后期维护
2) 内部样式
书写格式:
选中某个标签名{
书写样式;
}
讲课使用的是内部样式
3) 外部方式
a) 创建css文件:指定标签的样式
标签选择器{
书写样式;
}
b) 需要外部导入该css文件
rel属性:关联层叠样式表
<link href=”需要被导入的css文件” ref=”stylesheet”>
2.CSS的语法
选择器(id选择器,类选择器,标签选择,并集选择器,交集选择器,通用选择器){
CSS属性:CSS的属性值; 分号可以省略,建议永远给出分号
CSS属性(字体,背景,边框,背景图片的起始位置…(大小,颜色,边框的样式,边框的尺寸left/center/right…)
}
3.CSS的选择器
选择器的分类:
a 标签选择器(最普通一种方式)
书写格式:
标签名称{
CSS属性:css属性值;
}
b id选择器
在标签中一定要给定一个id属性,并且指定id属性值
<input type=”text” id=”inputId” >
书写格式:
|
#id属性值{ 书写样式; } |
注意事项:
1) 一个标签同时被标签选择和id选择器选中,那么id选择器的优先级要高于标签选择器
2)在同一个html页面中,不要给多个标签指定同名id属性,如果指定同名id属性值,那么js的时候,获取标签对象的时候,获取不到:getElementById(“id属性值”) ;
c 类选择器
在一个标签中使用类选择器,要指定一个属性:class属性
<input type=”text” class=”inputCls”>
书写格式:
.class属性值(inputCls){
书写样式;
}
注意事项:
在同一个页面下,多个标签可以指定同名的class属性
d 并集选择器(同时选中多个标签)
选择器1,选择器2,…{
书写样式;
}
e:交集选择器
书写格式:
选择器1 选择器2 选择器3{
书写样式;
}
4.伪类选择器
伪类表示一种状态:超链接标签a的几种状态
link:鼠标没有访问过的状态
hover:鼠标经过的状
active:鼠标**状态(鼠标点击了,但是没有松开的状态)
visited:鼠标访问过的状态(已经点击了,并且松开的状态)
书写格式:a:四个状态{….}
显示的效果顺序:link visited hover active (必须按顺序写入 否则效果显示有误)
在 CSS 定义中 a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
a:active 必须被置于 a:hover 之后，才是有效的。
5.CSS常用的属性
color:文本颜色属性
color: #f00;
line-height:行高
line-height: 60px;
letter-spacing:字符间距
letter-spacing: 10px;
text-align:文本的对其方式
text-align: center;
word-spacing:字间距:shu默认两个组成的叫单词
word-spacing: 10px;
text-decoration
(示例)
text-decoration: line-through;
6.css字体
font-family:字体系列(类型)系统默认是宋体
font-family: "楷体";
font-size:字体尺寸
font-size: 24px;
ont-style:字体的样式
常用的属性值:
normal:标准的字体样式
italic:斜体
font-style: italic;
font-wight:设置字体的粗细
属性值:
bold:适当加粗
font-weight: bold;
CSS字体的简写属性
font:italic bold 36px "黑体"
7.css背景
背景颜色:background-color
background-color: #0CF;
背景图片:background-image:
属性:url指定图片的路径
background-image: url(img/mm.jpg);
background-repeat:设置背景图片是否重复以及如何重复
常用的属性值:
默认值:repeat:x轴和y轴重复
repeat-x:背景图片水平方向重复
repeat-y:y轴重复
no-repeat:不重复
8.css列表
list-style-type:设置列表项前面的类型
list-style-type: none;
给列表项前面的类型自定义
list-style-image
list-style-image: url(img/start.jpg);
list-style-image: url(img/start.jpg);
(代码以及结果图如下)
8.CSS表格
将表格的边框合并为单一的框属性值:collapse
border-collapse :collapse;
9.CSS边框
边框的颜色border-color:边框颜色的简写属性
1)边框颜色默认的顺序:上 右 下 左
2)边框颜色某一边如果没设置,那么取对边的颜色
border-color:#f00;
边框宽度的简写属性
border-left-width: 10px;
border-right-width: 20px;
border-top-width: 30px;
border-bottom-width: 40px;
一块标签,要想显示边框的效果,必须指定属性:边框的样式:
border-style:边框样式的简写属性
border-style: solid;
border-left-style: solid;
border-right-style: dashed;
border-top-style: dotted;
border-bottom-style: double;
一个div显示边框,使用boder的简写属性
border:1px dashed #000 ;
width: 50px;
height: 50px;
10.盒子模型
盒子模型:div块标签+css进行网页布局 table布局现在基本已经被抛弃
一个盒子属性:
容量:就是给div块标签指定的宽度和高度
设置边框
border:1px solid #000;
width: 100px;
height: 100px;
让div1盒子内边距向右移动10px(意思是盒子里面的内容离盒子边框的距离)
padding-left: 10px;
给div1设置一个下外边距
margin-bottom: 10px;
盒子边距 margin:
margin-top: 10px;
(这里面的属性值可以不定义哪个方向从而之间定义距离例如: margin: 0 30px 0 0 必须按照上右下左的顺序设置)
11.display属性
dispaly
常用的属性值:none 次元素不会被显示 隐藏了!
display:none;
display:block;此元素将显示为块级元素，此元素前后会带有换行符
display: inline 默认。此元素会被显示为内联元素，元素前后没有换行符
12.float属性
浮动属性
float:
常用的两个属性值:
left:左浮动 (div块会自动往左靠,并且接在前一个浮动过的div块后面)
right:右浮 (和左浮动意思相反)
clear:属性:设置一个元素的侧面是否允许其他的浮动元素。
both:在当前两侧都不允许有浮动元素
(代码以及显示如下)