css笔记

原创已于 2022-03-30 17:50:15 修改 · 95 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#css
于 2019-12-09 15:59:41 首次发布
前端专栏收录该内容
6 篇文章
订阅专栏
<head>
几种样式的表现
		内联样式:在标签里面写
		外部样式:外面的CSS文件,在本页面中引用
		内部样式:在本页面中编写的CSS

优先级:
标签选择器<类选择器<id选择器<标签

		选择器:
		标签选择器:   <p> <diy>  <a> :     p{}  div{}  a{}
		类选择器:    class  :              .名字{}
		id选择器:    id :                 #名字{}
		组选择器:    <a><p>:               p,a{}

Cass   :注释  /*内容*/
Html   :注释  <!--内容  ->


<style type="text/css">
	选择器(及修饰的对象){
`	对象的属性1,属性值1,
	对象的属性2,属性值2,
	color:red;
	font-size:22px;
	}
</style>
</head>
<body>
	<div id="seach">
		<div id="s_left">2</div>
		<div id="s_right">3</div>
	</div>	
</body>

background-color:#cccccc;  			背景颜色
background-image:url('	图片.jpg’)	背景图像
background-repeat:XXX;				背景图像水平方向 repeat-x 平铺   no-repeat 不平铺
background-position					设置背景图像的起始位置
background-attachment				背景图像是否固定或者随着页面的其余部分滚动


color:red;							字体颜色
font-size:xxpx 						字体大小
word-spacing:xxpx					设置字间距
line-height							设置行高
letter-spacing						字距
direction							设置文本方向
ltr:默认。文本方向从左到右 
rtl 文本方向从右到左
text-align   						文本水平对齐方式
					   					left:左对齐
					   					center:水平居中
					   					right：右对齐
text-decoration						向文本添加修饰
Underline:下划线
			    						Overline:顶线
			    						line-through:删除线
			   							None:删除超链接的下划线
text-indent:xx像素					缩进元素中文本的首行,像素的大小应该是字体大小									的两倍
text-transform   					大小写转换
			        					Lowercase:转换成全小写
			       						Uppercase:转换成全大写
			        					Capitalize:把单词的首字母转换成大写



font-weight:						字体粗细:
										Normal:默认
				 						Bold:加粗
				 						Bolder:很粗
				 						100-900:慢慢加粗:属性值  400默认粗细	
font-family:						字体设置:楷体.....宋体      默认:宋体	
font:								字体一键设置:加粗 大小 字体
font-size:XXpx;     				字体大小	
font-style:							指定文本的字体样式
Normal:默认值,标准的字体样式
Italic:斜体的字体
Oblique:字体倾斜
Inherit:规定应该从父元素继承字体样式
font-variant						小型大写字体或者正常字体显示文本
Normal:默认值,标准的字体。
small-caps:小型大写字母的字体
Nherit:从父元素继承font-variant属性值

border: 2px #769DE2 solid;			边框样式一键设置
border:   							边框样式
border-width:						边框的线宽
border-color:						边框线的颜色
border-radius:2px;   				圆角边框，去菱角
border-style:						边框线样式
										none:无样式
										solid:实线
										dashed:虚线
										dotted:点线
										double:双线
										3D效果的边框:	
										inset:内凹
										outset：外凸
										ridge：脊线
										groove:槽线
border-spacing:0px   					和并边框线
border-collapse:collapse;   //			去除间隔,不会和并线

list-style	   						简写属性。把所有用于列表的属性设置一个声明中
list-style-type						设置列表样式
			  							none:去除样式
			  							circle:空心圆
			  							square:正方形
			  							disc:默认的实心圆
list-style-image:url("图片地址")  	设置列表为图片样式	
list-style-position: inside;		列表标记放置在文本以内，环绕文本根据标记对齐

width:200px/73%;   					网页宽 
height:100px/100%;   				网页高
max-height                 			设置元素的最大高度，内容可以超出，css不能超出
max-width							设置元素的最大宽度
min-height							设置元素的最小高度
min-width							设置元素的最小宽度
Float		 						同一行网页的比例调整，
Left:元素向左浮动
Right:元素向右浮动
margin : 10px 0px 15px 5px;  		外边距 （上、右、下、左）
padding: 10px;               		内边距

display:none						元素被隐藏了，占用的空间也会从页面布局中消失
visibility:hidden					元素虽然被隐藏了，但仍然会影响布局

行级和块级
块级：可以设置宽和高
行级：不可以设置宽和高
	如果希望把行级元素变成块级元素：
display:inline-block;				行级和块级结合
display:none 						此元素不会被显示
display:block  						此元素将会被显示为块级元素,前后会带有换行符

Clear								清除浮动
				  						left:清除左浮动
				  						right:右浮动
				  						both:清除所有浮动
 
white-space:   							空白处理
		       								pre：保留空白,不会自动换行
		       								pre-wrap:保留空白，会自动换行
		      	 							nowrap：不保留空白，不会自动换行


/*设置没有访问的颜色*/
		a:link{
			color:#0000;
			
		}
		/*设置访问后的样式*/
		a:visited{
			color:green;
		}
		/*鼠标经过时的样式*/
		a:hover{
			color:yellow;
			text-decoration:underline;
		}
		/*一直点击的颜色*/
		a:active{
			color:red;
		}

	
position 			定位
Static	定位。HTML元素的默认值，即没有定位，元素				出现在正常的流中。静态定位的元素不会受到 top, bottom, 		left, right影响。
fixed 固定定位(可以定位到任何地方，但是不会随着页面的滚动而		移动)
relative相对定位(可以定位到任何地方，移动后，之前的位置不		会消失，依然存在。)
absolute定位。绝对定位的元素的位置相对于最近的已定位父元素，		如果元素没有已定位的父元素，那么它的位置相对于<html>:

z-index :-1  		属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺						序较低的元素的前面	

透明度：
	filter:alpha(opacity:50):兼容IE浏览器
	opacity:0.5 兼容火狐、谷歌浏览器
#div01{
				width:300px;
				height:300px;
				background-color:red;
				filter:alpha(opacity:30);
				opacity:0.3;
			}