css笔记

来源：互联网发布：万国证券交易软件编辑：程序博客网时间：2024/06/02 02:42

1.什么是css：层叠样式表（cascading style sheets）

2.css作用：修饰网页结构（html5）外观如字体颜色大小，w3c（w3c组织，定义语言标准的组织）规定精良用css样式代替html属性

3.html和css关系

html：通过标记实现网页结构
css：修饰网页结构的外观

4.css的3种使用方式

1.内联样式：写在标记中
<标记名称 style=“css样式代码”/>
<标记名称 style="css样式代码">...</标记名称>
<P style="color:red;"></p>
2.内部样式：写在head中的代码
<style>
...样式代码
</style>
3.外部样式：将css代码单独写在一个以css后缀名的页面，只需引入页面即可

<link type="text/css" rel="stylesheet" href="css页面"/>
说明：
type：目标文档类型
rel：当前文档和目标文档关系（引入样式表）
href：目标文档URL，.css页面

4.css优先级

内联样式优先级最高，内部和外部样式优先级相同
如果样式冲突后面的样式覆盖前面的样式（即离html元素越近则优先级高）

5.选择器的种类（selector）

1.通配符选择器*{property:value;} (自动应用于所有标记中)
2.标记选择器标记{property:value;} (自动应用于指定表集中)
3.class类选择器 .class 类名称{。。。}(手动应用于任意标记中)常用于网页排版

应用在标记上: class="class名称1 class名称2" 名称可以有多个
如果限制某个标签上使用类选择器需要在选择器前面加上标签
h3.test{color:red;}
<h3 class="test">bbb
<b class="test">aaa</b>
只有h3会显示红色

4.id选择器 #id名称{。。。。}(手动应用于唯一标记，用一次) 应用在标记上 id="id名称"

5.群组选择器选择器名称,选择器名称...{....} (不同选择器但属性相同缩写)

eg：
<style>
p{
color:red;
}
.test1{
color:red;
}
#test2{
color:red;
}
p,.test1,#test2{
color:red;
}
</style>

6.后代选择器：用于嵌套标记中，两个选择器名称至少是父子关系即富选择器下面的子或孙子。选择器名称选择器民称{。。。}

7.子代选择器：用于嵌套标记中，两个选择器必须是父子关系。选择器名称 > 选择器名称{。。。}

注：只针对富选择器下面的子选择器，不包含子下面的孙子
<head>
<style>
eg:
.list1 li{ /*后代选择器:至少是父子关系*/
color:red;
}
</style>
.list1>li{/*子代选择器:必须是父子关系*/
color:red;
}
</style>

</head>
<body>
<ul class="list1">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</body>

6.伪类选择器

1.超链接选择器
：link 元素未访问过状态
：visited 元素访问过状态
：hover 鼠标悬停（划过）效果
：active 鼠标激活状态
说明：a.LVHA顺序设置
b.常用
a{
color:gray;
text-decoration:none;
}
a:hover{
color:red;
text-decoration:underline;
}
2.focus获得鼠标的焦点
input|a:focus{outline:none;} 去掉获得焦点的篮筐(文本框效果)和虚框(超链接效果)

7.伪元素选择器

：after 在元素里的后面添加内容或图片
：before 在元素里的前面添加内容或图片
说明：
选择器:after{
content:"内容"|url(图片url)|attr(属性)
}

8.css3.0

：first-child 找父元素第一个指定子元素
：last-child 找父元素最后一个指定元素
：nth-child（n）找父元素中的第n个指定元素
：only-child找父元素中唯一指定的子元素
：first-of-type 父元素中首次出现的指定元素
eg:
/*找父元素中第一个元素是 p元素的选择器*/
.box p:first-child{
background:gray;
}
/*找父元素中最后元素是 p元素的选择器*/
.box p:last-child{
background:blue;
}
/*找父元素中第3个元素是 p元素的选择器*/
.box p:nth-child(3){
background:green;
}
.box p:only-child{
background:red;
}
* :first-of-type 父元素中首次出现的p元素*/
.box2 p:first-of-type{
background:yellow;
}

9.文本样式

1.文本颜色 color：value；
value值
a.单词 red blue。。。。
b.十六进制（0-9 a b c d e f）eg：红色 #ff0000==#f00
c.rgb（）范围值0-255 red green blue eg：rgb（255,0,0）==rgb（100%，0%，0%）
d.rgba（）半透明 rgba（255,0,0,0.5）0.5表示半透明
e.总结：
红色 #f00 rgb(255,0,0)绿色 #0f0 rgb(0,255,0)蓝色 #00f rgb(0,0,255)黑色 #000 rgb(0,0,0)白色 #fff rgb(255,255,255)黄色 #ff0 rgb(255,255,0)
紫色 #f0f rgb(255,0,255)青色 #0ff rgb(0,255,255)浅灰 #eee rgb(210,210,210)深灰 #333 rgb(3,3,3)
2.文本大小 font-size：value；
value值
a.像素 px
b.em默认父元素大小的倍数例如 1.2em
c百分比
3.文本字体 font-family："Times New Roman",宋体,arial, 如果字体中没有"Times New Roman"则会找宋体 arial英文字体
4.文本水平对齐 text-align：left默认|center|right
5.文本行高 line_height:value值也可以是倍数当行高的值和盒子高度一致能实现文本在盒子中的垂直居中
6.文本缩进 text-indent:value;
7.文本加粗 font-weight:normal正常|bold加粗|100-900 说明：normal==400 bold==700
8.文本倾斜 font-style:normal正常|italic倾斜
9.文本小型大写 font-variant:normal|small-cap小型大写针对英文小写变成大写但比正常的大写小一号
10.text_decoration:none|underline|overline上划线|line-through删除线
11.text-shadow 文本阴影 h-shadow v-shadow blu color
说明：
a.h-shadow 必须水平阴影的位置。允许负值
b.v-shadow 必须垂直阴影的位置。允许负值
c.blur 可选模糊的距离值越小阴影越明显
d.color 可选阴影的颜色
e. 水平垂直
正正右下角
正负右上角
负正左下角
负负左上角
正负右上角
负正左下角
负负左上角
12.@font-face:加载服务器端中的字体客户端没安装字体也可以显示服务器的字体效果
<style>
@font-face{
font-family:myfont; /* 定义一个字体名称*/
src:url(font/simkai.ttf);
}
.box3{
font-family:myfont;
font-size:50px;
}
</style>
<body>
<div class="box3">加载服务器端字体</div>
</body>

10.盒子模型（BoxModel）

1.盒子模型的内容范围包括

margin border padding content部分组成
盒子宽度的计算
对象实际宽度=左侧外边距+左侧边框+左侧内边距+宽度+右侧内边距+右侧边框+右侧外边距
1.padding内边距：文本内容到边框的距离(空隙)
内边距属性：
padding 设置所有边距设置4个值顺序是上右下左
padding-bottom|left|right|top 设置底左右上边距
2.margin 外边距，盒子外围的距离，盒子和盒子之间的距离
内边距属性：
maring 设置所有边距设置4个值顺序是上右下左
margin-bottom|left|right|top 设置底左右上边距
说明：
margin值可以是正值，负值，auto
实现盒子的水平居中 margin：0 auto；
清除块元素的空隙在全局样式文件中添加 margin：0；padding：0；

两个盒子的margin值冲突，上下取大值，左右相加

嵌套元素，给子元素上下margin，会将上下margin值传递给父元素，而且上下margin冲突取大值。

3.border边框

border-style：边框样式：solid实现
单边框样式：
border-top|left|right|bottom-style
边框的宽度
border-width
单边框宽度
border-top|left|right|bottom-width
边框颜色
border-color
单边框颜色
border-top|left|right|bottom-color
缩写形式：
border：width style color 四个方向相同的属性
例如：border:1px solid #ff;
border-radius:盒子圆角
box-shadow:h-shadow v-shadow blur spread color inset;
说明：
a.h-shadow 必须，水平阴影的位置允许为负值
b.v-shadow 必须，垂直阴影的位置。允许为负值
c.blur 可选。模糊距离
d.spread 可选阴影的尺寸
e.color可选阴影的颜色
f inset 可选将外部阴影（outset）改为内部阴影
<style>
/*圆角*/
.box1{
width:80px;
  height:80px;
  background:#ff0;
  border-radius:8px;
}
/*圆*/
.box2{
width:80px;
  height:80px;
  background:#f00;
  border-radius:40px;
}
/*椭圆*/
.box3{
width:100px;
   height:40px;
   background:#00f;
   /*水平方向半径和垂直方向半径*/
   border-radius:50px/20px;
}
/*半圆*/
.box4{
width:80px;
  height:40px; /*高的是宽的一半*/
  background:#f0f;
   border-radius: 40px 40px 0 0;
}
</style>

11.布局（layout）

1.默认文档流
2.浮动布局
3.定位布局
浮动布局
格式：
float:left|right|none
说明：a.脱离文档流，不占位
b.无论是左浮动还是右浮动，浮动元素找带边框的边界停靠或另一个浮动的元素的边停靠
c.浮动的行元素能设置宽和高（默认文档流行元素不能设置宽高）
d.浮动的块元素，如果没有设置宽高，那宽是文本的宽度（文档流块元素宽父元素100%）
e.浮动元素对后面的元素影响，实现后面的元素的文本内容环绕。
清除浮动
1.格式
clear:both 清除两边的浮动|left清除左浮动|right清除右浮动
2.作用
1.划分版块和版块的界限
2.解决高度塌陷：父元素中的子元素都浮动，而父元素没设置高度，那父元素的高度为0.
万能清楚：写在父元素上的class样式
.clearfix{zoom:1;} .clearfix:after{content:"."; display:block;clear:both; height:0; visibility:hidden;}

12.布局显示

1.display：none|block块元素|inline行元素|inline-blocknei联块（功能类似与浮动布局float）
说明：
a.display：none；表示不占位隐藏
b.inline-block;是块元素（能设置宽和高）并且有行元素不折行特性。
2.visibility：hidden；占位隐藏
13定位（position）
1.格式：
postion：static默认值|fixed固定|absolute绝对定位|relative相对定位
fixed固定定位
说明：
1.脱离文档流，不占位
2.默认坐标在浏览器的左上角，通过top，left，right，bottom 移动元素的位置。
3.当有滚动条时，将元素固定在浏览器的位置上即不随滚动条滚动。
absolute绝对定位
说明：
1.脱离文档流，不占位
2.默认坐标在浏览器的左上角，通过top，left，right，bottom移动元素的位置。
3.随滚动条滚动。
relative 相对定位
说明：
1.自身文档流，占位
2.默认坐标在自身元素的左上角，通过top，left，right，bottom移动元素的位置。
常用方法：绝对定位和相对定位结合使用
原理：
先给父元素或祖先yu7ansu相对定位给一个宽高，母的将坐标点定在父元素或祖先元素的左上角，然后给子元素绝对定位，通过top，left，right，bottom移动子元素的位置。

14.z-index 实现元素排序

说明：
1.z-index属性有正负值，默认值0，值越大元素越在上面，没单位
2.z-index必须结合fixed，absolute，和relative使用。

15.透明度属性

1.opacity：0-1；
说明：1.0代表完全透明 1代表不透明
2.filter：alpha（opacity=0-100）；说明：支持IE，IE6.0 IE7.0
eg：opacity:0.5;
filter:Alpha(opacity=50); /* IE8 以及更早的浏览器 */

16.overflow

格式：
overflow：auto|hidden溢出隐藏|scroll有滚动条

17.背景（background）

background-color：value；背景颜色
background-image：url（图片url）；背景图片注：有背景图片的盒子中如果移动背景图片需要用margin不能用padding
background-repeat：repeat默认值|repeat-x水平重复|repeat-y垂直重复|no-repeat不重复
background-position：水平位置垂直位置：
说明：
1.背景位置方向
水平方向：left center right
垂直方向：top center bottom
背景位置只有一个值，代表的水平位置，垂直位置默认为垂直居中。
背景位置像素值
background: url(../../zoujinjiashu/zjjs/ppjsBg.jpg)no-repeat center/cover;
center/cover表示居中布满。cover是吧背景图片扩展至足够大，以使背景图片完全覆盖背景区域。

18.列表

列表
1. list-style-type:disc 实心圆|
square 实心方块
circle 空心圆
decimal 阿拉伯数字

2. list-style-image:url( 图像URL);
3. list-style-position:outside 默认| inside
缩写形式
list-style: type image position;
说明:
a. 常用: list-style:none; 全局样式去掉项目符号
b. 常用新闻列表
.list li{
background:url(images/dot.png) no-repeat left center;
padding-left:16px;
}

常用方式：
ul,li{
border:1px solid #00f;
}
.list2{
list-style:none;
}
.list2 li{
background: url(image/dot01.png) no-repeat left center;
padding-left:20px;
}

<ul class="list2">
<li>链接1</li>
<li>链接1</li>
<li>链接1</li>
</ul>

阅读全文

0 0