让网页更加美丽(css入门)

Posted 韶光不负

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了让网页更加美丽(css入门)相关的知识,希望对你有一定的参考价值。

为了让我们的网页更加漂亮,也是学习前端必须的内容所以学习css选择器是必须的,下面废话不多说让我们学习起来。

目录

 

什么是css?

css常见的三种写法

常见的css属性

css中颜色表示方法

css选择器

什么是css选择器?

css选择器

基本选择器

 css优先级排序

属性选择器

css3新增加的选择器(在css3中添加,小编就是简单说几个)


什么是css?

沉叠样式表:html中诞生的技术,用来修饰HTML网页。

css常见的三种写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>网页</title>
		
		<style >
			div{
				color: aqua;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="css/text.css"/>			
	</head>
	<body>
		<div style="color: #0000FF;">第一种写法</div>
		<div >第二种写法</div>
		<div class="color" >第三种写法</div>
	</body>
</html>
		

第三种方法下css部分(在开发中,这种方式是常见的方式

.color{
				color: #FF0000;
	  }

现象:

常见的css属性

width
height
 font-size字体大小
border (线的大小 线的类型 线的颜色)边线

css中颜色表示方法

第一种

color: red;
color: 颜色单词;

第二种:

color: (#ff,#ff,#ff)
/* rgb按照三源色比例进行配置,按照16进制书写 */

第三种:

color: rgb(255,255,255)
				
/* rgb按照三源色比例进行 */

第四种:

color: rgba(255,255,255,0.3)
                
 /* rgb按照三源色比例进行,a表示透明度,范围0~1 */

css选择器

什么是css选择器?

方便开发找到和修改渲染标签的方式

css选择器

基本选择器

基本选择器
id选择器(在网页中表示唯一,不建议使用数子开头)#标签名称
类选择器(表示就是‘.’,clsss选择器).标签名称
标签选择器标签名称
通配符选择器*(代表通配符,代表任意)

包含选择器

子代选择器(如:div下的p标签)div>p
后代选择器(如:div下所有的p标签,以空格表示)div p

复合选择器

用逗号隔开可以多个选择器公用一个标签
范围选择器对范围选择器进行渲染

写法示例

#fixed-input{
				color: red;
			}
.color{
	color: rgba(255,255,255,0.3)
				
/* rgb按照三源色比例进行,a表示透明度,范围0~1 */
}
div{
	width: auto;
}
*{
	margin: 0px;
	/* 外边距 设置为0,清除外边距 行内标签默认都有 */
	padding: 0px;
	/* 内边距 */
	border: 1px solid red;
}
/* 子代选择器 */
header>.top {  
		height: 37px;
		width: 100%;
		background-color: #1D011B;
}
/* 后代选择器 */
header top{
        height: 37px;
		width: 100%;
		background-color: #1D011B;
}
/* 复合选择器 */
header .top{
        height: 37px;
		width: 100%;
		background-color: #1D011B;
}

 css优先级排序

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

属性选择器

div[text]div中的text标签
input[type$='i']以i结尾
input[type^='i']以i开头
input[type*='e']通配有e

示例

            /* input标签中text=haha值的标签 */
			input[text='haha']{
				color: #0000FF;
			}
			/* input标签中有e字母的标签 */
			input[type*='e']{
				color: #000000;
			}
			/* input标签中有e字母开头的标签 */
			input[type^='i']{
				color: #0000FF;
			}
			/* input标签中有e字母结尾的标签 */
			input[type$='i']{
				color: #721170;
			}

css3新增加的选择器(在css3中添加,小编就是简单说几个)

(学习地址:CSS 参考手册 (w3school.com.cn)

:root选择文档的根元素。
element+element标签1同一个级别下的下一个标签2
:first-child选择属于父元素的第一个子元素的每个 <p> 元素。
            /* 没有点击的效果 */
			a:link{
				color: #000000;
				/* 设置没有下划线 */
				text-decoration: none;
			}
			
			/* 被点击后效果 */
			a:visited{
				color: #721170;
			}
			
			/* 鼠标放上去的效果 */
			a:hover{
				color: #721170;
			}
			
			/* 被点击效果 */
			a:active{
				color: #0000FF;
			}

 

以上是关于让网页更加美丽(css入门)的主要内容,如果未能解决你的问题,请参考以下文章

CSS3给网页穿上美丽的外衣

day01_CSS入门

css 基础入门

炫酷 CSS 背景效果的 10 个代码片段

less快速入门

less快速入门