CSS基本语法1

 

目录

一.样式：

二.常用选择器

标签选择器：

类选择器：

id选择器：

选择器组合：

通配选择器：

选择器优先级：

 三.文本背景修饰

文本修饰

背景修饰

四.列表

五.伪类

六.图片透明度

七.标签分类

1.块级标签

2.行级标签

3.行级块标签

4.display修改标签类型

5.div标签

6.span标签

---

CSS是Cascading Style Sheets（级联样式表），定义页面样式。

一.样式：

每个标签添加样式比较麻烦，可以使用内嵌样式表或外部样式表设置样式

        <!-- 内嵌样式表 -->
		<style type="text/css">
			p{color: green; font-size: 30px; }
		</style>
			<!-- 外部样式表 -->
		<!-- <link href="css/index.css" rel="stylesheet" /> -->

二.常用选择器

标签选择器：

p{color: green; font-size: 30px; }

类选择器：

            .p1{
                color: pink; 
            }
            .p2{
                color: blue;
            }

            <p class="p1">
				熟悉各种常用的Java框架和中间件，如Spring、Hibernate、MyBatis、Apache                 Commons、Log4j等。
			</p>
			
			
			<p class="p2">
				具备良好的沟通能力和团队协作能力，能够与客户和团队成员进行有效的沟通和协作。
			</p>

id选择器：

#h1{
                color: darkorchid;
            }

<p id="h1">
                具备丰富的实际工作经验，并在某一领域内具备较深的专业知识。

</p>

选择器组合：

            .p1,.p2,#h1{
                color: green; font-size: 30px;
            }

通配选择器：

*{

        color: green;

}

选择器优先级：

匹配越多的选择器，优先级越低；由高到低：id选择器>类选择器>标签选择器>通配选择器

 三.文本背景修饰

文本修饰

.p2{
				color: #0000FF;
				font-size: 20px;
				font-weight: bold;   /*加粗*/
				font-family: 楷体;  /*字体*/
				text-align: center;
				text-decoration: underline; /* 修饰 ：下划线*/
				text-decoration: line-through;/* 修饰 ：删除线*/
				text-decoration: none;/* 通常用于修饰超链接 ：无下划线*/
				font-style: italic; /* 斜体*/
				line-height: 20px;/*文本的高*/
				letter-spacing: 20px; /*文字间距*/
				text-indent: 2em;/* 首行缩进 em 单位 当前两位*/
				
			}

背景修饰

.p1{
				width: 600px;
				height: 600px;
				
				background-color: aqua;
				background-image: url(img/3_QI6DE%7DI%7D8MHNTYPJ%5BY%5D$T.png);
				/* background-repeat: no-repeat;/*背景图片重复 */ */
				background-position: bottom;/*背景位置*/
				background-size: 500px 512px;/*背景大小 宽  高*/
				
			}

四.列表

			.u1 li{
				/* 后代选择器 父级 子级 */
				color: #0000FF;
				font-size: 20px;
				list-style: none;/*是否有前面标号*/
				list-style-position: outside;
				
				
				list-style: inside url(img/original_1e6125a6a4358719c929c82f29d5c4e3.jpg);
			}

五.伪类

 CSS伪类专门用来表示标签的一种的特殊的状态

:hover伪类表示鼠标移入的状态
:active表示的是被点击的状态
:focus向拥有键盘输入焦点的标签添加样式。

			a:hover{
				color: blue;
				text-decoration: underline;
			}
			a:active{
				color: green;
			}
			.input:focus{
				background-color: blue;
			}

六.图片透明度

			img{
				opacity: 0;/*0 : 完全透明  1 ：完全不透明 */
			}
			img:hover{
				opacity:0.5 ;
			}
			img:active{
				opacity: 1;
			}
			

七.标签分类

1.块级标签

块级标签：无论内容多少 都会独自占据一行的。
例如<p>、<h1>、<ul>、<ol>、<hr/>等。

2.行级标签

行级标签：只占自身大小的标签，不会占一行。
例如<font>、<b>、<i>、<a>等。

3.行级块标签

例如 <input/> <img>等。

 一般情况下使用块级标签包含行级标签，不使用行级标签包含块标签。
a可以包含任何标签，除去a本身；
p标签不可以包含任何的块标签 。

4.display修改标签类型

block ：设置标签为块标签
inline ：设置标签为行级标签
inline-block ：设置标签为行级块标签
none ：隐藏标签（标签将在页面中完全消失）

5.div标签

块级标签，可以放置任何标签，无附加内容，用于布局网页

6.span标签

行级标签，可以放置任何标签，无附加内容，用于选中文字