ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

CSS - 学习笔记

2022-05-07 19:33:20  阅读:168  来源: 互联网

标签:笔记 height 学习 1px red background border 选择器 CSS


CSS - 学习笔记

一、什么是CSS

  • Cascading Style Sheet 层叠级联样式表
  • CSS : 表现(美化网页)
    • 字体,颜色,边距,高度,宽度,背景图片……

二、CSS 基本语法

	<!-- 规范 style type="text/css" 可以编写css的代码
	每一个声明使用分号结尾
	语法: 
		选择器 {
			声明1;
		}
	-->
	<style type="text/css">
		h1{
			color: red;
		}
	</style>

style.css

h1{
	color: red;
}

HTML 引入 CSS 文件

<link rel="stylesheet" type="text/css" href="css/style.css">

CSS 的优势:

  • 内容和表现分离
  • 网页结构统一,可以实现复用
  • 样式十分丰富
  • 建议使用独立 html 的 css 文件
  • 利于 SEO,更容易被搜索引擎收录

CSS 三种导入方式:

  • 行内样式

    <h1 style="color:blue">我是标题一</h1>
    
  • 内部样式

    <stype>
    	h1{
      	color : red;
      }
    </stype>
    
  • 外部样式

    h1{
    	color: red;
    }
    

优先级 : 就近原则

三、选择器

选择器作用:选择页面上的某一种或者某一个元素

3.1 基本选择器

  • 标签选择器 : 选择一类标签

    	<style type="text/css">
    		/* 标签选择器 会选择到这个页面上所有的这个标签的元素 */
    		h1 {
    			color: red;
    			background: wheat;
    			border-radius: 10px;
    		}
    		p{
    			font-size: 80px;
    			color: blue;
    		}
    	</style>
    
  • 类选择器 : 选中所有 class属性一致的标签

    	<style type="text/css">
    		/* 类选择器的格式 : .class的名称{} 
    		有点:可以多个标签归类,是同一个class
    		
    		*/
    		.hello{
    			color: red;
    		}
    		.title{
    			color: wheat;
    		}
    	</style>
    
    <h1 class="hello">标题一</h1>
    <h1 class="title">标题二</h1>
    <h1 class="hello">标题三</h1>
    
    <p class="title"> 我是P标签</p>
    
  • ID 选择器 : 全局唯一

    	<style type="text/css">
    		/* ID选择器 : id必须保证全局唯一
    		 #id名称{}
    
    		 不遵循就近原则,是固定的
    		 id选择器 > class选择器 > 标签选择器
    		*/
    		#title {
    			color: pink;
    		}
    	</style>
    
    <h1 id="title">标题一</h1>
    <h1>标题二</h1>
    <h1>标题三</h1>
    <h1>标题四</h1>
    <h1>标题五</h1>
    

优先级:id选择器 > class选择器 > 标签选择器

3.2 层次选择器

  • 后代选择器

    /* 后代选择器 */
    body p{
      background: red;
    }
    
  • 子选择器

    /* 子选择器 */
    body >p{
      background: wheat;
    }
    
  • 相邻兄弟选择器

    /* 相邻兄弟选择器 : 只有一个,向下 */
    .active + p{
      background: red;
    }
    
  • 通用选择器

    /* 通用选择器 : 当前选中元素向下的所有兄弟元素 */
    .active ~p{
      background: green;
    }
    

3.3 结构伪类选择器

/* ul 的第一个子元素 */
ul li:first-child{
  color: red;
}

/* ul 的最后一个子元素 */
ul li:last-child{
  background: green;
}

3.4 属性选择器

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>属性选择器</title>

	<style type="text/css">
		.demo a{
			float: left;
			display: block;
			height: 50px;
			width: 50px;
			border-radius: 10px;
			background: blue;
			text-align: center;
			color: gainsboro;
			text-decoration: none;
			margin-right: 5px;
			font: bold 20px/50px Arial;
		}

		/* 存在id属性的元素 属性选择器 a[]{} */
/*		a[id]{
			background: yellow;
		}*/
		a[id=first]{
			background: yellow;
		}
		/* 
		=号 绝对等于 
		*= 包含等于
		^= 以这个开头
		$= 以这个结尾
		
		*/
		a[class *= "links"]{
			background: green;
		}

		/* 选中href中 http开头的元素 */
		a[href ^= http]{
			background: wheat;
		}

		/* 选中href中 pdf结尾的元素 */
		a[href $= pdf]{
			background: yellow;
		}


	</style>


</head>
<body>


<p class="demo">
	
	<a href="http://www.baidu.com" class="links item first" id="first">1</a>
	<a href="" class="links item active" target="_blank" title="Hello">2</a>
	<a href="images/123.html" class="links item">3</a>
	<a href="images/123.png" class="links item">4</a>
	<a href="images/123.jpg" class="links item">5</a>
	<a href="abc" class="links item">6</a>
	<a href="/a.pdf" class="links item">7</a>
	<a href="/abc.pdf" class="links item">8</a>
	<a href="abc.doc" class="links item">9</a>
	<a href="abcd.doc" class="links item last">10</a>

</p>


</body>
</html>
= 绝对等于
*= 包含等于
^= 以这个开头
$= 以这个结尾

四、美化网页元素

  • 有效的传递页面信息
  • 美化页面,才能吸引用户
  • 凸显页面的主题
  • 提高用户的体验

span 标签

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>span标签</title>

	<style type="text/css">
		#title1{
			font-size: 50px;
		}


	</style>

</head>

<body>

欢迎学习<span id="title1">CSS</span>


</body>
</html>

4.1字体样式

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>字体样式</title>


	<!--  

	font-family: 	字体
	font-size: 		字体大小
	font-weight: 	字体粗细
	color:			字体颜色
	-->


	<style type="text/css">
		body{
			font-family: 楷体; 
		}
		h1{
			font-size: 50px;
		}

		.p1{
			font-weight: bold;
			color: wheat;
		}
	</style>

</head>


<body>

<h1>百度百科:</h1>

<p class="p1">百度百科是百度公司推出的一部内容开放、自由的网络百科全书。其测试版于2006年4月20日上线,正式版在2008年4月21日发布</p>
<p>截至2020年10月,百度百科已经收录了超2100万个词条,参与词条编辑的网友超过717万人,几乎涵盖了所有已知的知识领域</p>

<p>Great minds have purpose, others have wishes.</p>


</body>
</html>

4.2 文本样式

  • 颜色 : color

  • 对齐方式 : text-align

  • 首行缩进 : text-indent

  • 行高 : line-height

  • 装饰

    下划线:text-decoration: underline;
    删除线:text-decoration: line-through;
    上划线:text-decoration: overline;
    去除下划线:text-decoration: none;
    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>

    <!--
    颜色:
        单次
        RGB
        RGBA
    text-align :排版
    text-indent: 2em; 首行缩进

    -->

    <style>
        h1{
            color: red;
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p2{
            background: wheat;
            line-height: 300px;
        }

        /*下划线*/
        .l1{
            text-decoration: underline;
        }
        /*中划线*/
        .l2{
            text-decoration: line-through;
        }
        /*上划线*/
        .l3{
            text-decoration: overline;
        }

        /* a标签去除下划线 */
        a{
            text-decoration: none;
        }

    </style>


</head>
<body>
<a href="">123123</a>
<p class="l1">1231231231312</p>
<p class="l2">6666655555555</p>
<p class="l3">78978978978978978</p>
<h1>百度百科</h1>

<p class="p1">百度百科是百度公司推出的一部内容开放、自由的网络百科全书。其测试版于2006年4月20日上线,正式版在2008年4月21日发布</p>
<p class="p2">截至2020年10月,百度百科已经收录了超2100万个词条,参与词条编辑的网友超过717万人,几乎涵盖了所有已知的知识领域</p>

<p>Great minds have purpose, others have wishes.</p>

</body>
</html>

4.3 文本阴影和超链接伪类

阴影

/* text-shadow : 阴影颜色 水平偏移 垂直偏移 阴影半径 */
#price{
text-shadow: #6e6ea9 10px 10px 10px;
}

超链接伪类

/* 默认的颜色 */
a{
  text-decoration: none;
  color: black;
}
/* 鼠标悬浮的颜色 */
a:hover{
  color: orange;
}
/* 鼠标按住未释放的状态 */
a:active{
  color: green;
}

4.4 列表

/*
list-style:
    none    去除圆点
    circle  空心圆
    decimal 数字
    square  正方形
*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

4.5 背景

  • 背景颜色

  • 背景图片

 <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            /* 默认是平铺 */
            background-image: url("images/txc.JPG");
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat:no-repeat;
        }
    </style>

五、盒子模型

  • Margin 外边距
  • Border 边框
  • Padding 内边距
  • Content 内容

5.1 边框

<style>
        /*总有一个外边距 margin 默认为 0*/
        body{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }

        /*border: 粗细 样式 颜色*/
        #app{
            width: 300px;
            border: 1px solid red;
        }

        h2{
            font-size: 16px;
            background: aqua;
            line-height: 30px;
        }

        form{
            background: aquamarine;
        }
        div:nth-of-type(1) input{
            border: 3px solid black;
        }

        div:nth-of-type(2) input{
            border: 3px dashed wheat;
        }

        div:nth-of-type(2) input{
            border: 3px dashed green;
        }

    </style>

5.2 外边框和内边距

外边框的妙用:居中元素
margin: 0 设置全部方位都为0
margin: 0 auto; 设置上下边距为0,左右为自动对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距</title>

    <!--
    外边框的妙用:居中元素
    margin: 0   设置全部方位都为0
    margin: 0 auto; 设置上下边距为0,左右为自动对齐
    -->
    <style>
        /*border: 粗细 样式 颜色*/
        #app{
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;

        }

        h2{
            font-size: 16px;
            background: aqua;
            line-height: 30px;
            margin-top: 0;
            margin-bottom: 0;
        }

        form{
            background: aquamarine;
        }

        input{
            border: 1px solid black;
        }

    </style>

</head>


<body>

<div id="app">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名:</span>
            <input type="text">
        </div>
        <div>
            <span>密码:</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱:</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

5.3 圆角边框

<!--
4个角
顺时针:左上 右上 右下 左下
border-radius
-->
<style>
  div{
    width: 100px;
    height: 100px;
    border: 10px solid red;
    border-radius: 100px;
  }
</style>

5.4 阴影

/*
box-shadow: 10px 10px 50px #1d1c1c;
*/
img{
  width: 200px;
  height: 200px;
  border-radius: 562.6px;
  box-shadow: 10px 10px 50px #1d1c1c;
  margin-bottom: 120px;
}

六、浮动

6.1 标准文档流

块元素:独占一行

h1 ~h6 p div ……

行内元素:不独占一行

span a img ……

行内元素可以被包含在块元素中

6.2 display

这个也是一种实现行内元素排列的方式

<!--
  block 块元素
  inline 行内元素
  inline-block 是块元素,但是可以内联,在一行
-->
<style>
div{
  width: 100px;
  height: 100px;
  border: 1px solid red;
  display: inline;
}
span{
  width: 100px;
  height: 100px;
  border: 1px solid red;
  display: inline-block;
}
</style>

6.3 float

div{
    margin: 10px;
    padding: 5px;
}

img{
    width: 50px;
    height: 130px;
}

#father{
    border: 1px solid red;
}

.layer01{
    border: 1px solid wheat;
    display: inline-block;
    float: right;
}
.layer02{
    border: 1px solid wheat;
    display: inline-block;
    float: right;
}
.layer03{
    border: 1px solid wheat;
    display: inline-block;
    float: right;
}


.layer04{
    border: 1px solid wheat;
    display: inline-block;
    font-size: 12px;
    line-height: 23px;
    float: right;
    clear:both;

}

6.4 父级边框塌陷的问题

  • clear

    /*
    clear:left 左侧不允许有浮动
    clear:right 右侧不允许有浮动
    clear:both 两侧不允许有浮动
    clear:none
    */
    

解决方案:

  • 增加父级元素的高度

    #father{
        border: 1px solid red;
        height: 800px;
    }
    
  • 增加一个空 div 标签,清除浮动

    <div class="clear"></div>
    
    .clear{
        clear: both;
        margin: 0;
        padding: 0;
    }
    
  • overflow

    在父级元素中增加一个 overflow : hidden;

  • 父类添加一个伪类:after

    #father:after{
        content: '';
        display: block;
        clear: both;
    }
    
    

七、定位

7.1 相对定位

  • 相对定位 position:relative
    相对于原来的位置进行偏移
上:top
下:bottom
左:left
右:right
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <!--
    相对定位 position
        相对于自己原来的位置进行偏移
    -->
    <style>
        body{
            margin: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }

        #father{
            border: 1px solid red;
            padding: 0;
        }

        #first{
            border: 1px dashed orange;
            position: relative; /* 相对定位,上下左右 */
            top: -20px;
        }

        #second{
            border: 1px dashed wheat;

        }

        #third{
            border: 1px dashed green;

        }


    </style>
</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>


</body>
</html>

7.2 绝对定位

  • 绝对定位
    • 没有父级元素定位的前提下,相对于浏览器定位
    • 父级元素存在定位,相对于父级元素进行偏移
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>


    <!--
    绝对定位 position:absolute
    -->
    <style>
        body{
            margin: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }

        #father{
            border: 1px solid red;
            padding: 0;
            position:relative;
        }

        #first{
            border: 1px dashed orange;
        }

        #second{
            border: 1px dashed wheat;
            position: absolute;
            right: 50px;
            top: -10px;
        }

        #third{
            border: 1px dashed green;

        }


    </style>
</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>


</body>
</html>

7.3 固定定位

固定定位 fixed

7.3 z-index

#content{
    width: 350px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid black;
}

ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
    color:orange;
}

img{
    width: 280px;
    height: 260px;
}

/* 父级元素相对定位 */
#content ul{
    position: relative;
}
.tipText{
    position: absolute;
    width: 350px;
    height: 25px;
    top: 190px;
    left: 100px;
}

/* zindex:默认是0,最高无限 */
.tipText{
    z-index: 999;
}

.tipBg{
    position: absolute;
    width: 350px;
    height: 25px;
    background: black;
    top: 190px;
    opacity: 0.5; /* 背景透明度 */
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Z-index</title>

    <link rel="stylesheet" href="css/style.css" type="text/css">

</head>
<body>

<div id="content">
    <ul>
        <li><img src="images/bg.jpg" alt=""></li>
        <li class="tipText">学习前端-CSS</li>
        <li class="tipBg"></li>
        <li>时间:2022-01-01</li>
        <li>地点:ShangHai</li>
    </ul>
</div>

</body>
</html>

标签:笔记,height,学习,1px,red,background,border,选择器,CSS
来源: https://www.cnblogs.com/ZunSir/p/16243875.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有