CSS介绍
CSS学习资料
CSS实例
rgb颜色对照表:
引入css:在每个标签上都可以引入style属性
background-color:
height:
- css的注释: /* */
编写css样式的方法
1). 在标签里面直接写style的相关属性;
2). 将style标签的样式写在head里面;- id选择器;
i1{
background-color:red; height:20px;
}
当标签需要css时应用方式:hello fentiao但是有一个bug,每个标签的id理论上不应该相同,所以该方法不常用;
- 类选择器(最常用)
.i1{
background-color:red;
height:20px;
}
当标签需要css时应用方式:
hello fentiao- 标签选择器
div {
background-color:red;
height:20px;
}
对所有的div标签采用div里面的css样式。
- 关联(层级)选择器
.c1 div {
….
}
span div {
…
}.c1 div a p {
…..
}- 组合选择器:
i1, #i2, #i3 {
...
}
.c1, .c2, .c3 {
…
}属性选择器:
对选择到的标签再进行一次筛选;input[type=’text’]{
width:100px;
height:200px;
}
input[n='westos']{ width:100px; height:200px; }
.c1[n=’westos’]{
width:100px;
height:200px;
}
3). 写在单独的文件中;
- css优先级问题
标签上的style > 编写顺序(就近原则)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>westos</title>
<style>
.c1{
background-color : red;
color:white;
}
.c2{
color:black;
font-size:100px;
}
</style>
</head>
<html>
<body>
<div class="c1 c2" style="color:pink;">hello fentiao</div>
</body>
</html>
</body>
</html>
- css独立
如果想要css样式不仅仅被现有网页中的标签或类应用,还可以被其他网页应用,实现方式:把css样式独立成一个文件.
css/my.css
.c1{
background-color : red;
color:white;
}
.c2{
color:black;
font-size:100px;
}
index.html网页需要调用时:
# 写在html页面中的head标签里面;
<link rel="stylesheet" href="css/mycss.css"/>
# 写在html的body标签里面,调用css样式;
<div class="c1 c2" style="color:pink;">hello fentiao</div>
边框:宽度 样式(dotted solid double dashed) 颜色
- border
常用的css样式属性:
height; 48px; # 高度,不能用百分比;
width:80%; # 宽度,可用像素和百分比显示;
border: 10px solid pink; # 边框
font-size:16px; # 字体大小;
text-align:center; # 水平方向居中;
line-height:48px; # 垂直方向居中,但要指定该标签的高度才生效;
font-weight:blod; # 字体加粗;
float:
默认情况下div是块标签,占一整行;
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动,并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。
父集级div管不住:
**示例:
<body>
<div style="width:20%; background-color:green; float:left;">hello</div>
<div style="width:70%; background-color:pink ; float:right;">fentiao</div>
</body>
display
定义和用法
display 属性规定元素应该生成的框的类型。
说明
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。
把块级标签转化为内联标签:
把内联标签转化为块级标签:
hello world
设置某个内联标签,既有行内标签的属性也有块级标签的属性:
hello world
取消标签:
display:none;
*重点:
行内标签无法设置高度,宽度和边距(padding and margin);而块标签可以.
padding(内边距) margin(外边距)(0,auto):
text-align
height, width, line-height, color, font-size, font-weight,
CSS补充:
position
background
hover
overflow
z-index
opacity
示例:
输入框右边放置图标;