CSS教程

css快速入门(上)

本文主要是介绍css快速入门(上),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

css快速入门(上)

一、什么是CSS

1、什么是CSS

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

2、CSS发展史

  • CSS 1.0:1994年 10月提出;
  • CSS 2.0:DIV(块)+CSS,HTML与CSS结构分离的思想,网页变得简单,SEO;
  • CSS 2.1:浮动,定位;
  • CSS 3.0:圆角、阴影、动画…浏览器兼容性。

练习格式:

3、快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    规范,<sytle>可以编写css的代码,每一个声明最好以“;”结尾
    语法:
        选择器{
                声明1;
                声明2;
                声明3;
             }
    -->

    <style>
        h1{
            color: red;
        }
    </style>
    
</head>
<body>

<h1>CSS测试</h1>

</body>
</html>

  • 建议使用这种规范(单独写一个css文件,用link标签引入css文件效果)

4、CSS优势

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

5、CSS的3种导入方式

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

    <!--内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>

    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>

<!--优先级:就近原则-->
<!--行内样式:在标签元素中,编写一个style属性,编写样式即可-->
<h1 style="color: red">这是标签</h1>
</body>
</html>

  • 拓展:外部样式两种方法

    • 链接式 html
    <!--外部样式-->
        <link rel="stylesheet" href="css/style.css" />
    
    • 导入式 @import是CSS2.1特有的!
    <!--导入式-->
        <style>
            @import url("css/style.css");
        </style>
    

二、基本选择器

作用:选择页面上的某一个后者某一类元素

1、标签选择器

选择一类标签 标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: orange;
            background: blue;
            border-radius: 10px;
        }
    </style>
</head>
<body>
<h1>标签选择器</h1>
</body>
</html>

2、类选择器

选择所有class一致的标签,跨标签,格式:.类名{}

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

    <style>
        /*类选择器的格式 .class的名称{}
            好处:可以多个标签归类,是同一个class,可以复用
        */
        .demo1{
            color: blue;
        }
        .demo2{
            color: red;
        }
        .demo3{
            color: aqua;
        }
    </style>
</head>
<body>
<h1 class="demo1">类选择器:demo1</h1>
<h1 class="demo2">类选择器:demo2</h1>
<h1 class="demo3">类选择器:demo3</h1>
</body>
</html>

3、id选择器

全局唯一,格式:#id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器:id必须保证全局唯一
            #id名称{}
            不遵循就近原则,优先级是固定的
            id选择器 > 类选择器 > 标签选择器
        */
        #demo1{
            color: aqua;
        }
        .demo2{
            color: red;
        }
        #demo2{
            color: orange;
        }
        h1{
            color: blue;
        }
    </style>
</head>
<body>

<h1 id="demo1">id选择器:demo1</h1>
<h1 class="demo2" id ="demo2">id选择器:demo2</h1>
<h1 class="demo2">id选择器:demo3</h1>
<h1>id选择器:demo4</h1>
<h1>id选择器:demo5</h1>
</body>
</html>

优先级:id > class > 标签

三、层次选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器*/
        body p{
            background: deeppink;
        }
        /*子选择器*/
        body>p{
            background: olive;
        }
        /*相邻兄弟选择器:只选择一个,相邻向下*/
        .active+p{
            background: blueviolet;
        }
        /*通用兄弟选择器,当前选中元素的向下的所有兄弟元素*/
        .active2~p{
            background: dodgerblue;
        }
    </style>
</head>
<body>

<p>后代选择器p1</p>
<p class="active">子选择器p2</p>
<p>相邻兄弟选择器p3</p>
<p class="active">通用兄弟选择器p4</p>
<p>通用兄弟选择器p5</p>

</body>
</html>

1、后代选择器

在某个元素的后面

/*后代选择器*/
<style>
body p{
	background:red;
}
</style>

2、子选择器

一代

/*子选择器*/
<style>
body>p{
	background:orange;
}
</style>

3、相邻的兄弟选择器

同辈 只选择一个,相邻向下

/*相邻兄弟选择器:只有一个,相邻(向下)*/
<style>
.active+p{
background: red
}
</style>

<body>
	<p class="active">p1<p>
	<p>p2</p>
</body>

4、通用选择器

当前选中元素的向下的所有兄弟元素

<style>
/*通用兄弟选择器,当前选中元素的向下的所有兄弟元素*/
	.active~p{
	background:red;
}
</style>
<body>
	<p class="active">p1<p>
	<p>p2</p>
</body>

四、结构伪类选择器

伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        ul li:first-child{
            /*ul的第一个子元素*/
            background: mediumaquamarine;
        }
        ul li:last-child{
            /*ul的最后一个子元素*/
            background: lightpink;
        }
        /*
        选中p1:定位到父元素,选择当前的第一个元素
        选择当前P元素的父级元素,选中父级元素的第一个,并且是当前元素才生效!
         */
        p:nth-child(1){
            background: greenyellow;
        }
        p:nth-of-type(2){
            /*选中父元素下的第二个p元素*/
            background: lightseagreen;
        }
        a:hover{
            color: red;
        }
    </style>
</head>
<body>

<a href="">鼠标移过来我变红色</a>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li01</li>
    <li>li02</li>
    <li>li03</li>
</ul>

</body>
</html>

五、属性选择器

id+class结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: aquamarine;
            text-align: center;
            color: #ffffff;
            text-decoration: none;
            margin-right: 5px;
            line-height:50px;
            font: bold 20px/50px Arial;
        }
        /*
        属性名,属性名 = 属性值(正则)
              = 表示绝对等于
             *= 表示包含
             ^= 表示以...开头
             $= 表示以...结尾
             存在id属性的元素
                a[]{}
         */
        a[id]{
            background: deeppink;
        }
        a[id=first]{
            /*id=first的元素*/
            background: greenyellow;
        }

        a[class*="links"]{
            /*class 中有links的元素*/
            background: #1643b1;
        }

        a[href^=http]{
            /*选中href中以http开头的元素*/
            background: aquamarine;
        }
        a[href$=pdf]{
            /*选中href中以http开头的元素*/
            background: aquamarine;
        }
    </style>
</head>
<body>

<p class="demo">
    <a href="https://www.baidu.com/" class="links item first" id="first">百度</a>
    <a href="" class="links item active" target="_blank " title="test">链接</a>
    <a href="img/hello.html" class="links item">网页</a>
    <a href="img/str1.png" class="links item">png</a>
    <a href="img/str2.jpg" class="links item">jpg</a>
    <a href="abc" class="links item">链2</a>
    <a href="/fy.pdf" class="links item">pdf</a>
    <a href="/quit.pdf" class="links item">pdf2</a>
    <a href="dump.doc" class="links item">doc</a>
    <a href="kiko.doc" class="links item last">doc2</a>
</p>

</body>
</html>

六、美化网页

1、为什么要美化网页

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

span标签:重点要突出的字,使用span标签套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1{
            font-size: 50px;
        }
    </style>
</head>
<body>

学习<span id="title1">CSS</span>
</body>
</html>

font-family:字体
font-size:字体大小
font-weight:字体粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            font-family: 楷体;
            color: red;
        }
        h3{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }
    </style>
</head>
<body>

<h3>学习CSS</h3>
<p class="p1">P</p>

</body>
</html>

常用写法

/* 也可以填px,但不能超过900,相当于bloder */
font-weight:bolder;
/*常用写法:*/
font:oblique bloder 12px "楷体"

2、文本样式

  • 颜色–>color

  • 文本对齐方式–>text-align:center

  • 首行缩进–>text-indent:2em

  • 行高–>line-height:300px;

  • 下划线–>text-decoration

text-decoration:underline/*下划线*/
text-decoration:line-through/*中划线*/
text-decoration:overline/*上划线*/
text-decoration:none/*超链接去下划线*/
  • 图片、文字水平对齐
img,span{vetical-align:middle}

3、超链接伪类

<style>
	a{/*超链接有默认的颜色*/
		text-decoration:none;
		color:#000000;
	}
	a:hover{/*鼠标悬浮的状态*/
		color:orange;
	}
	a:active{/*鼠标按住未释放的状态*/
		color:green
	}
	a:visited{/*点击之后的状态*/
		color:red
	}
</style>

4、阴影

/*	第一个参数:表示水平偏移
	第二个参数:表示垂直偏移
	第三个参数:表示模糊半径
	第四个参数:表示颜色
*/
text-shadow:5px 5px 5px 颜色

5、列表ul li

/*list-style{
	none:去掉原点
	circle:空心圆
	decimal:数字
	square:正方形
}*/
ul li{
	height:30px;
	list-style:none;
	text-indent:1em;
}
a{
	text-decoration:none;
	font-size:14px;
	color:#000;
}
a:hover{
	color:orange;
	text-decoration:underline
}
/*放在div中,作为导航栏*/
<div id="nav"></div>
#nav{
	width:300px;
}

6、背景

  • 背景颜色:background

  • 背景图片

background-image:url("");/*默认是全部平铺的*/
background-repeat:repeat-x/*水平平铺*/
background-repeat:repeat-y/*垂直平铺*/
background-repeat:no-repeat/*不平铺*/
  • 综合使用
background:red url("图片相对路径") 270px 10px no-repeat
background-position:/*定位:背景位置*/

7、渐变

  • 渐变背景网址:https://www.grabient.com
  • 径向渐变、圆形渐变。
body{
     background-color: #0cd7f3;
     background-image: linear-gradient(43deg, #0093E9 0%, #80D0C7 46%, #23F549 100%);
}
这篇关于css快速入门(上)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!