CSS初级学习总结

最新推荐文章于 2024-07-18 17:34:14 发布

却没能成为自己

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量603

点赞数 2

文章标签： css 学习 css3

本文链接：https://blog.csdn.net/qq_15971099/article/details/126900804

版权

CSS学习总结

CSS声明总是以分号 ; 结束，声明总以大括号 { } 括起来。
inherit（继承）、initial（默认）、unset（有则继承无则默认）；

一、CSS选择器类型:
*1.ID 选择器：*使用 # 标识，语法格式：#S{…}（S为选择器名）。
*2.类选择器：*使用 . 标识，语法格式：.S{…}（S为选择器名）。
*3.元素选择器：*又叫标签选择器，使用标签名作为选择器名，语法格式：S{…}（S为选择器名）。

	后代选择器(以空格 分隔)
	子元素选择器(以大于 > 号分隔）
	相邻兄弟选择器（以加号 + 分隔）
	普通兄弟选择器（以波浪号 ～ 分隔）

#a,b{…………｝一个id叫a和一个标签是b的样式
#a b{…………｝一个id叫a下面的一个标签是b的样式
#a:b{…………｝一个id叫a的伪类b，例如：a:hover
#a.b{…………｝一个id叫a的下面的class叫b的样式 div p：div内所有P，包括孙子辈标签； div>p ：div内所有P，但不包括孙子辈标签； div+p ：选取div外第一个P； div~p ：选取div外所有P；

二、CSS的使用：
1.外部链接：

浏览器会从文件文件名.css 中读到样式声明，并根据它来格式文档。

2.内部样式：

当单个文档需要特殊的样式时，可以使用

3.优先级：

通用选择器（*）、元素(类型)选择器、类选择器、属性选择器、伪类、ID 选择器、内联样式

三、CSS>background背景：

1.	背景颜色（background-color） : #boc4de、rgb(255.255.0)、red;
2.	背景图片（background-image） : url(' ') 图片地址；
3.	图片平铺（background-repeat） : repeat-x 水平方向平铺、 no-repeat 不平铺；
4.	图片是否固定（background-attachment ）：scroll（默认滚动）、fixed（不移动）、inherit(继承父类)；
5.	图片位置（background-position） ：right、top;
6.	简写：body {background:#ffffff url('img_tree.png') no-repeat right top;}
	     当使用简写属性时，属性值的顺序为：background-color、background-image、background-repeat、background-attachment、background-position

四、CSS>text文本:

1.对齐方式（text-align）：center、left、right、justify(左右对齐，适用于登录注册文本框前文字)；
2.文本修饰（text-decoration）：overline(上划线)、line-through(删除线)、underline(下划线)、bink(闪烁的文本#*浏览器不显示*)、none（移除划线）；
			text-decoration: underline wavy red; 红色波浪形下划线
			text-decoration: underline overline;上下划线
3.文本方向（direction）：ltr(left-to-right)文本位置左到右，文字附加在右、rtl（right-to-left）文本位置右到左，文字附加在右；div {direction: rtl; unicode-bidi: bidi-override; }文本位置右到左，文字附加在左；
4.字符间距（letter-spacing）：length；可以消除inline-block元素间的换行空格间隙问题、中文可以使用；
5.单词间距（word-spacing）：length;
6.行高（line-height）：number（相当于倍数）、length、% 不可以使用负值；
7.缩进（text-indent）：length、%；
8.阴影（text-shadow）：必须：h-shadow(水平阴影位置)、v-shadow(垂直阴影位置)；可选：blur(模糊距离)、color（颜色）；	text-shadow: 2px 2px #ff0000;
9.大小写（text-transform）：capitalize（大写开头）、uppercase（全大写）、lowercase（全小写）、inherit（继承）；
10.垂直对齐：（vertical-align）：sub（垂直对齐文本的下标）、super（垂直对齐文本的上标）、top（把元素的顶端与行中最高元素的顶端对齐）、text-top（把元素的顶端与父元素字体的顶端对齐）、middle（把此元素放置在父元素的中部。）、bottom（使元素及其后代元素的底部与整行的底部对齐。）、text-bottom（把元素的底端与父元素字体的底端对齐。）、length、%；
11.空白处理（white-space）：normal（默认，空白会被浏览器忽略。）、pre（保留空白）、nowrap（不会换行直到<br>）、pre-wrap（保留空白且可换行）、pre-line（忽略空白但保留换行）；

五、CSS>fonts字体:

1.	字体系列（font-family）：SimSun（默认宋体）、SimHei（黑体）、Microsoft Yahei（微软雅黑）、Microsoft JhengHei（微软正黑体）、KaiTi（楷体）、NSimSun（新宋体）、 FangSong（仿宋）；
2.	字体大小（font-size）：xx-small、x-small、small、medium（默认）、large、x-large、xx-large、smaller、larger、length、%；
3.	字体样式（font-style）：italic（斜体字）、oblique（倾斜文字）；
4.	字体粗细（font-weight）：bold（粗体）、bolder（更粗字体）、lighter（细字体）、100、200、300...900（400 等同于 normal，而 700 等同于 bold）；
5.	小型大写字体（font-variant）：所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小；

六、CSS>link链接:

	a:link-正常，未访问的链接；a:link {background-color:#B2FF99;}
	a:visited-已访问过的链接；a:visited {background-color:#FFFF85;}
	a:hover-鼠标放在链接上时；a:hover {background-color:#FF704D;}
	a:active-鼠标点击时；a:active {background-color:#FF704D;}
	a:hover 必须跟在 a:link 和 a:visited后面、a:active 必须跟在 a:hover后面

七、CSS>列表:

1.	无序列表（ul）：
	标号：ul li {list-style-type:none; margin:0; padding:0;}
				* list-style-type的取值:none（无标记）、disc（默认实心圆）、circle（空心圆）、square（实心方块）、decimal（阿拉伯数字）、cjk-ideographic（汉字）、lower-roman（小写罗马）、upper-roman（大写罗马）、 lower-alpha（小写英文字母）、upper-alpha（大写英文字母）；
	图片：ul li {list-style-image: url(); margin:0;padding:0;}
2.有序列表（ol）：修改开始位置<ol start='2'><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li></ol>

八、CSS>table表格:

 1.table表示一个表格,tr表示这个表格中间的一个行,tr必须在一个table里面；td表示行中一列，需要嵌套在tr中间。
 2.边框（border）：border：border-width、border-style、 border-color；例：border：1px solid
        red;``每个属性都可以单独设置某个边：border-top-width、border-top-style、border-top-color；
 3.边框样式（border-style）：none（优先级最低的隐藏）、hidden（优先级最高的隐藏）、dotted（系列圆点，半径为border-width）、dashed（系列短方形虚线）、solid（实线）、double（双实线，宽度为border-width）、groove（有雕刻效果的边框）、ridge（有浮雕效果的边框）、inset（陷入效果）、outset（突出效果）；
		单独设置各边：border-top-style：dotted;（right右、bottom下、left左）简写顺序，上右下左：border-style:dotted solid double dashed;
 4.边框圆角（border-radius）： 		border-radius: 15px 50px 30px 5px：左上角，右上角，右下角，左下角： 		border-radius: 15px 50px 30px：左上角，右上角和左下角，右下角：
 		border-radius: 15px 50px：左上角和右下角，右上角和左下角 		border-radius: 15px：四个角
 5.轮廓（outline）：原理同边框border，位于边框边缘外围。

九、CSS>hidden隐藏元素：

1.	h1.hidden {visibility:hidden;}被隐藏的元素仍然占用位置。
2.	h1.hidden {display:none;}被隐藏的元素不再占用位置。
3.	display属性值：block（块级显示，前后换行）、inline（默认前后不换行）、list-item(列表显示)；

十、CSS>position定位：

1.	position: static;静态定位的元素不会受到 top, bottom, left, right影响，遵循正常的文档流对象；
2.	position:fixed;top:30px;right:5px;位置相对于浏览器窗口固定，即使窗口是滚动也不会移动；
3.	position:relative;left:-20px;从元素的原始左侧位置减去 20 像素；
4.	position:absolute;left:100px;top:150px;绝对定位的元素的位置相对于最近的已定位父元素；

十一、CSS>Overflow溢出控制：

1.	visible：默认，溢出显示在元素框外；
2.	hidden：内容被修剪，隐藏多余内容；
3.	scroll：内容被修剪，多余滚动显示；
4.	auto：少则不修剪，多则滚动修剪；

十二、CSS>float浮动：

left、right。clear清除浮动，原布局位置不足。

十三、CSS>对齐：

1.	margin: auto;水平居中块级元素，如div；
2.	text-align: center;文本居中对齐（justify 左右对齐）；
3.	position: absolute;左右对齐块级元素，如div；
4.	line-height：200px;文本垂直居中；
5.	transform: translate(X, Y,Z); XYZ数值为百分数；沿着XYZ平移；

十四、CSS>导航栏分割线：

li {border-right:1px solid #555;}
li:last-child {border-right: none;}

十五、CSS>下拉菜单：

.显示的class名:hover .隐藏的class名 { display: block;}

<style>
.yc {
		width:200px;
		border:1px solid red;
}
.xs {
		width:100px;
		height:100px;
		display: none;
		position: absolute;
		top:130px;
		background-color: pink;
}
.yc:hover .xs {
		display: block;
}
</style>
<div class="yc">
		鼠标移动到这显示
		<div class="xs">
				显示出来了
 		 </div>
</div>