CSS 基础入门

CSS

css是什么

css 联级样式表

级联:关联 两个内容之间的关系

样式表 : css修饰网页的语法集

优点: 将页面的内容与表现形式(css)分离 可达到重复利用

css与html之间的关系

html 是网页的内容

css 是网页样式 外观

css能做什么

作用:为html控制外观

css基本语法

三种样式表

1.行级样式表
<p style="color:red;font-size:20px;"></p>
2.内嵌样式表

写在head中

将样式与网页内容分离

<head>
		<meta charset="utf-8" />
		<title></title>
		<style  type="text/css">
			p{
				color: red; font-size: 20px;
			}
		</style> 
<head>
3.外部样式表

在外部创建css文件

在< head>中连接导入

 p{color:red;font-size:20px;}  
<!--在外部创建css文件-->
<link href="css/外部.css" rel="stylesheet"/>
<!--在head中导入-->

css选择器

1.标签选择器

写在head中 标签名{属性}

 <style  type="text/css">
			p{
				color: red; font-size: 20px;
			}
 </style> 
2.类选择器

写在head中

. 类名{属性}

<head>
<style>
.n1{
    color:red;
    font-size:50px;    
}
<!--.n1 {属性}-->
    </style> 
<head>
<body>
 <p class="n1">001</p>
</body>

3.id选择器

写在head中

.#id号{属性}

<head>
<style>
.n2{
    color:red;
    font-size:50px;    
}
<!--.#n2 {属性}-->
    </style> 
<head>
<body>

 <p class="n2">002</p>
</body>
4.通配选择器

写在head中

*{} 为所有的标签提供属性–已被定义的除外

*{
    color=red;
}
5.其他选择器

子选择器 .n1>.b1{属性}

相邻选择器 .n1+p{属性}

兄弟选择器 .n1~p{属性}

               /* 子选择器 */	
				.n1 >.b1
              {
				color: #FF0000;	
					 
				}
				/* 相邻选择器 */
				
				.n1+p{
					color: #FF0000;	
				} 
				/* 兄弟选择器 */
				 .n1~p{
					color: #FF0000;	
				}
				
6.选择器的优先级(权重)

由低到高:通配选择器<标题选择器<类选择器<id选择器

css文本标签

font-family:楷体 —字体选择

font-align:center—居中

font-style:italic–斜体

font-weight:bold–加粗

text-decoration:underline-下划线

text-decoration:none–去除下划线

line-height:30px–行高

letter-spacing:30px—指定字符间距

text-indent:30px–首行缩进

p{
				color: #FF0000;
					/* 字体颜色 */
				font-family: 楷体;  
				/* 字体设置 */
				/* text-align: center; */
				/* 文本位置 --居中--靠右--靠左 */	
				font-style: italic;
				/* 斜体 */
				font-weight: bold;
					/* 字体加粗 */
				text-decoration: line-through;
					/* 删除线 */
					/* text-decoration: underline; */
					/* 下划线 */
					line-height: 150px;
					/* 行高 */
					letter-spacing: 10px;
					/* 字体间距 */
					text-indent: 50px;
				}				

css背景标签

background-color:背景颜色

background-image: url - 背景图片地址 插入背景图片

background-repeat:no-repeat 背景图片不重复

background-repeat:repeat-x x轴重复

background-repeat:repeat-y y轴重复

background-postion:center 居中

      p{
				/* 插入背景颜色的尺寸 */
				width: 500px;
				height: 500px;
				/* 插入背景图片的尺寸 */
				 background-size: 300px ;
				 /* 插入背景图片不重复 */
				background-repeat: no-repeat;
				/* 插入背景图片居中 */
			background-position: center;
			/* 插入背景图片 */
				background-image: url(img/libai.jpg); 
				/* 插入背景颜色 */
				background-color: aquamarine;
				
				
			}

css列表标签

list-style-type:改变序号图标

list-style-postion:控制图标位置

list-style-image:插入图标

           .u1 li{
				text-align: center;
				list-style-type: none;
				list-style-image:  url(img/img.jpg);
				/* list-style-position: inside; */				<!--当文本居中,图标会随着文本居中-->
			}

css伪类

:link 没有访问过超连接 --只定义超链接

:visited 访问过的链接 --只定义超链接

:hover 移入鼠标悬浮

:active 被点击的状态

:focus 鼠标光标焦点

/* 只定义超链接 未被访问的链接 */
			a:link{
				color:  #7FFFD4
				font-size: 50px;
				
			}
			/* 只定义超链接  访问过的链接 */
			a:visited{
				
				color:  bisque;
				
			}
			/* 鼠标移入 悬浮 */
			a:hover{
				color: #FF0000;
				font-size: 50px;
			}
			.a1:hover{
				color: aquamarine;
			}
			/* 被点击时的状态 */
			a:active{
				color: blue;
			}
			.a1:active{
				color: #FF0000;
			}
			
			/* 鼠标光标聚焦 */
			.a2:focus{
				background-color: #7FFFD4;
				}
				
				.a1:focus{
					background-color: #0000FF;
					border: 0px;
				}
				
				.d1:hover{
					background-color: blue ;
					
				}

css透明标签

img{opacity:0.5;}

css标签分类

块级标签

无论内容有多少,独占一行

默认宽与父级标签一致

例 :< h1> < p>< hr> < ul> < ol>< li>

行级标签

只占自身大小 可以设置宽高

行级块标签

可以设置宽高

p不可以包含任何的块标签

a可以包含任何的块标签 a本身除外

display标签

将标签变为行级标签

< p style="display" >

div块标签

用来网络布局 可以放任何标签

<div style=" color: #7FFFD4; font-size: 100px;" class="d1"> 
     我爱你,爱着你,就像老鼠爱大米
</div>

span行级标签

被用来选中文档文字

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页