CSS基础

CSS基础

css选择器

基本选择器

元素选择器:
	div{  #标签名字
         color:red;
	}
id选择器:id值不能重复
	<div id="xuefei">
    	雪飞大美女
	</div>
	
	#xuefei{  
		color:green;
	}
类选择器: 类值可以重复
	<div id="dazhuang" class="c1">
    	大壮dsb
	</div>
	<div id="xuefei" class="c1">
    	雪飞大美女
	</div>
	
	.c1{
		color: green;
	}
	
	div.c1{ #div标签里面含有class值为c1的标签
		color: green;
	}
通用选择器
*{ #找到所有的标签
	color: green;
}

组合选择器

后代选择器

div a{   #找到div标签后代里面的所有a标签
	color:red;
}

儿子选择器

div>a{ #找到div的儿子标签这一代的a标签
	color:red;
}

毗邻选择器

div+a{  #找到是紧挨着div标签的下一个标签(是兄弟标签)
	 color: red;
}

弟弟选择器

div~a{  #找到的是同级的后面的所有兄弟标签
	color: red;
}

属性选择器

	#通过属性名来查找
	[title]{ #找到所有含有title属性的标签  
		color: red;
	}
	
	div[title]{  #含有title属性的div标签
		color: red;
	}
	#通过属性名对应的值来查找,当属性值的值为数字的时候,数字要加上引号[title=‘666‘]
	input[type=text]{ #含有type属性,并且type属性的值为text的input标签
		background-color: red;
	}

分组

多个选择器选择的标签设置相同css样式的时候,就可以用分组
div,p{  #div选择器和p选择器共同设置相同的样式,可以逗号分隔
	color:red;
}

伪类选择器

a标签自带的效果:未访问过的时候是蓝色的字体颜色,访问过之后是紫色的,自带下划线

/* 未访问的链接 */
a:link {
  color: #FF0000
}

/* 已访问的链接 */
a:visited {
  color: #00FF00
} 

/* 鼠标移动到链接上 */  这个用的比较多,可以应用在其他标签上
a:hover {  
  color: #FF00FF
} 

/* 选定的链接 */ 就是鼠标点下去还没有抬起来的那个瞬间,可以让它变颜色
a:active {
  color: #0000FF
}

/*input输入框获取焦点时样式*/
input:focus {   #input默认的有个样式,鼠标点进去的时候,input框会变浅蓝色的那么个感觉
  #outline: none;
  background-color: #eee; #框里面的背景色
}

伪元素选择器

 		/*伪元素选择器*/
        div:first-letter{
            color: red;
            font-size: 20px;
        }
        /*在p标签内容的前面插入一些内容*/
        p:before{
            content: ‘?‘;
            color: green;
            font-size:100px;
        }
        /*在p标签内容的后面插入一些内容*/
        p:after{
            content: ‘哈哈!‘;
            color: pink;
        }

选择器的优先级

      /*优先级数字越大,越优先显示其效果,优先级相同的,显示后面定义的选择器对应的样式*/
        /*id选择器优先级为100*/
        /*#d1{*/
            /*color:deepskyblue;*/
        /*}*/
        /*!*继承的优先级为0*!*/
        /*body{*/
            /*color:red;*/
        /*}*/
        /*!*类选择器的优先级是10*!*/
        /*.c1{*/
            /*color: blue;*/
        /*}*/
        /*.c2{*/
            /*color: orange;*/
        /*}*/
        /*!*元素选择器优先级是1*!*/
        /*div{*/
            /*color: green;*/
        /*}*/
        内敛样式优先级为1000
        <p class="cc3" style="color: red;">我是cc3的p标签</p>
        
        important优先级最高,最牛逼
        .cc1 .cc3 {
            color: purple!important;
        }

css属性相关

高度宽度设置,注意:只有块级标签能够设置高度宽度,内敛标签不能设置高度宽度,它的高度宽度是由内容决定的

	div{
            width: 100px;  宽度
            height: 100px; 高度
            background-color: pink;
        }

补充:a标签的字体颜色设置必须选中a标签才行

.c1 a{  
	color: red;
}

字体属性

字体

.c1{
	font-family: ‘楷体‘,‘宋体‘,‘微软雅黑‘;
}

字体大小

.c1{
            /*font-family: ‘楷体‘,‘宋体‘,‘微软雅黑‘;*/
            font-size:14px; 默认字体大小为16px.
            
        }

字体颜色

color:red;

子重,粗细

 .c1{
           
            font-weight: bold;
            font-weight: 100;
        }
        

值	描述
normal	默认值,标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细,400等同于normal,而700等同于bold

颜色表示方式

		p{
            /*color: red;*/
            /*color: #78FFC9;*/
            /*color: rgb(123,199,255);*/
             color: rgba(123,199,255,0.3);  多了一个透明度的数字:0-1的一个数字
        }

文字属性

文字对齐

	text-align
	
	div{
            width: 200px;
            height: 200px;
            background-color: yellow;
            /*text-align: center;*/
            text-align: right;
        }
        
	left	左边对齐 默认值
	right	右对齐
	center	居中对齐

文字装饰

	text-decoration
	
	div a{
            /*text-decoration: none;*/  #给a标签去除下划线
            /*text-decoration: line-through;*/
            text-decoration: overline;
        }
	值	描述
	none	默认。定义标准的文本。
	underline	定义文本下的一条线。
	overline	定义文本上的一条线。
	line-through	定义穿过文本下的一条线。

首行缩进

p {
  text-indent: 32px; #首行缩进两个字符,因为我记得一个字在页面上的默认大小为16px
}

背景属性

背景颜色
background-color: red;

	div{
            width: 600px;
            height: 600px;
            /*background-color: red;*/
            /*background-image: url("yeye.jpg");*/
            /*background-repeat: no-repeat;*/
            /*background-position: 100px 50px;*/  相对于div标签的,距离左边100px,距离上面50px
            background:url("yeye.jpg") no-repeat left center;
            /*background-position: right top;*/

        }
简写方式,颜色  图片路径 是否平铺 图片位置
background:#ffffff url(‘1.png‘) no-repeat right top;
        

边框

	div{
            
            width: 200px;
            height: 200px;
            /*border-style: solid;*/  边框样式
            /*border-color: red;*/    边框颜色
            /*border-width: 10px;*/   边框宽度
            /*border:10px solid red;*/  简写方式

            
            
            /*border-left-style: solid;*/
            /*border-left-width: 10px;*/

            /*border-right-style: dashed;*/
            /*border-top-style: dashed;*/
            /*border-bottom-style: dashed;*/
            /*border-right-width: 5px;*/
            border-left:10px solid red;  单独设置边框的简写方式

        }

控制圆角
	border-radius: 50%;  

display属性

        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /*display: inline;  !* 将标签设置为内敛标签 *!*/
            /*display: inline-block;  !* 将标签设置为同时具备内敛和块级标签的一些特性,比如可以设置高度宽度,但是不独占一行 *!*/
            /*display: none;  !* 隐藏标签 ,并且不占用自己之前的空间*!*/

        }
        span{
            border: 2px solid blue;

        }

        .c1{
            width: 200px;
            height: 200px;
            /*display: inline-block;*/  
            display: block; /* 将内敛标签设置为块级标签 */
        }
        
     值	           意义
     display:"none"	HTML文档中元素存在,但是在浏览器中不显示。一般用于配合JavaScript代码使用。
     display:"block"	默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分。
     display:"inline"	按行内元素显示,此时再设置元素的width、height、margin-top、margin-  bottom和float属性都不会有什么影响。
     display:"inline-block"	使元素同时具有行内元素和块级元素的特点。   
	
	
隐藏标签
	visibility: hidden; /* 隐藏标签,但是标签还占用原来的空间 */
    /*display: none;  !* 隐藏标签 ,并且不占用自己之前的空间*!*/

css盒子模型

content内容区域  
padding 内边距
border 边框宽度
	div{
            width: 200px;
            height: 100px;
            border: 2px solid deeppink;
            /*padding-top: 10px;*/
            /*padding-left: 5px;*/
            /*padding-right: 2px;*/
            /*padding-bottom: 4px;*/
            /*padding: 10px 20px;  !* 10px上下内边距 ,20px左右内边距 *!*/
            /*padding: 10px 20px 5px 2px;  !* 10px上下内边距 ,20px左右内边距 *!*/
            padding: 10px 20px 5px 0;  /* 10px上下内边距 ,20px左右内边距 */
            
        }

margin 外边距
top距离上面标签的距离
bottom距离下面标签的距离
left 距离左边标签的距离
rigth 距离右边标签的距离

        .d1 {
            width: 200px;
            height: 100px;
            border: 2px solid deeppink;
            margin-bottom: 200px;  
        }
		.d2{
            margin-top: 100px;  
            border: 2px solid blue;

        }

	两个简写的方式
	/*margin: 10px 20px;*/
	margin: 10px 5px 6px 3px;

	两个情况:
		垂直方向如果上下两个标签都设置了margin外边距,那么取两者的最大的值
		水平方法,两个标签都设这外边距,取两者的边距之和


浮动float

	.c1{
            background-color: red;
            height: 100px;
            width: 100px;
            float: left;
        }
        .c2{
            background-color: blue;
            height: 100px;
            width: 100px;
            float: right;
        }
        
浮动会造成父级标签塌陷问题
解决方法:
	1 父级标签设置高度
	2 伪元素选择器清除浮动,给父级标签加上下面这个类值
		.clearfix:after{
            content: ‘‘;
            display: block;
            clear: both;  清除浮动clear
        }
        
clear的值和描述        
	值	描述
	left	在左侧不允许浮动元素。
	right	在右侧不允许浮动元素。
	both	在左右两侧均不允许浮动元素。

overflow溢出属性

 	.c1{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            /*overflow: hidden;*/
            overflow: auto;  
        }
	<div class="c1">
    	总结一下:为什么要有浮动啊,是想做页面布局,但是浮动有副作用,父级标签塌陷,所以要想办法去掉这个副作用,使用了clear来清除浮动带来的副作用,我们当然也可以通过设置标签为inline-block来实现这种布局效果,但是把一个块级标签变成一个类似内敛标签的感觉,不好操控,容易混乱,所以一般都用浮动来进行布局。
	</div>

值	描述
visible	默认值。内容不会被修剪,会呈现在元素框之外。
hidden	内容会被修剪,并且其余内容是不可见的。
scroll	内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

圆形头像示例

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>圆形的头像示例</title>
  <style>

    .header-img {
      width: 150px;
      height: 150px;
      border: 3px solid white;
      border-radius: 50%;
      overflow: hidden;
    }
    
    .header-img>img {
        width: 100%;  #让img标签按照外层div标签的宽度来显示

    }
  </style>
</head>
<body>

<div class="header-img">
  <img src="meinv.png" alt="">
</div>

</body>
</html>

总结一点:width宽度设置的时候,直接可以写100px,30%这种百分比的写法,它的宽度按照父级标签的宽度的百分比来计算.

定位position:相对定位和绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            height: 100px;
            width: 100px;
        }
        .c2{
            background-color: blue;
            height: 100px;
            width: 100px;
            /*position: relative;  !*相对定位,保留原来的空间位置,相对自己原来的位置移动,以左上角为基准*!*/

            /*top: 20px; 往下移20px,距离原来位置的上边框20px */
            /*top: -20px;*/
            /*left: 20px;*/
            /*right: ;*/
            /*bottom: ;*/

            position: absolute; /* 绝对定位,不保留自己原来的位置,按照父级标签或者祖先级标签..设置了position为 relative的标签的位置进行移动,如果一直找不到设置了设个属性的标签,那么按照body标签来移动 */

            top: 20px;
            left: 20px;
        }
        .c3{
            background-color: green;
            height: 100px;
            width: 100px;
        }
        .ccc{
            height: 100px;
            width: 200px;
            background-color: purple;
        }
        .cc{
            position: relative;
            left: 200px;
        }
    </style>
</head>
<body>
<div class="ccc"></div>
<div class="cc">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
</div>

</body>
</html>

回到顶部示例:position为fixed固定定位,通过相对于浏览器窗口的距离来设置位置.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            height: 500px;
            width: 200px;
        }
        .c2{
            background-color: green;
            height: 500px;
            width: 200px;
        }

        .s1{
            position: fixed; /*固定定位,位置是根据浏览器窗口来的*/
            /*top:20px;*/
            left: 20px;
            bottom: 20px;
            background-color: blue;
            height: 40px;
            width: 80px;
            text-align: center;

            line-height: 40px; /* 和标签高度一致,标签内容就垂直居中 */

        }
        .s1 a{
            color: white;
            text-decoration: none;
        }
    </style>
</head>
<body>

<!--<a name="top">这里是顶部,亲爱的</a>-->  <!-- 锚点 -->
<div id="top">这是顶部</div> <!-- 锚点 -->

<div class="c1"></div>
<div class="c2"></div>

<span class="s1">
    <a href="#top">回到顶部</a> <!-- 触发锚点 -->
</span>

</body>
</html>


锚点设置的两种方式
	<!--<a name="top">这里是顶部,亲爱的</a>-->  <!-- 锚点 -->
	<div id="top">这是顶部</div> <!-- 锚点 -->
触发锚点的a标签写法
<a href="#top">回到顶部</a> <!-- 触发锚点 -->

z-index控制层级

模态对话框示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .shadow{
            position: fixed;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0,0,0,0.5);
            z-index: 99;
        }
        .mode{
            position: fixed;
            height: 400px;
            width: 300px;
            background-color: white;
            z-index: 100;  /* 数值越大越在上层显示 */
            left: 50%;  /* 按照窗口宽度的50%来移动 */
            top:50%;    /* 按照窗口高度的50%来移动 */
            margin-left: -150px;
            margin-top: -200px;

        }

    </style>
</head>
<body>

<div>
    <h1>
        22期,吴老板唱歌
    </h1>
</div>


<div class="mode">

</div>

<div class="shadow">

</div>


</body>
</html>

opacity透明度

        .c1{
            background-color: rgba(255,0,0,0.3); /* 背景颜色或者字体颜色等单独的透明度 */
            height: 100px;
            width: 100px;
        }
        .c2{
            background-color: rgb(255,0,0);
            height: 100px;
            width: 100px;
            opacity: 0.3;  /* 整个标签透明度 */
        }
<div class="c1">
    你好
</div>
<div class="c2">
    我好
</div>

CSS基础

上一篇:对 JsonConvert 的认识太肤浅了,终于还是遇到了问题


下一篇:Netty-整合kryo高性能数据传输