CSS学习

CSS学习

CSS样式

  1. 内联式CSS样式:直接写在现有的HTML标签中
  2. 嵌入式CSS样式: 写在当前的文件中(把css样式代码写在<style type=”text/css”></style>标签之间)
  3. 外部式CSS样式:写在单独的一个文件中 使用<link>标签将CSS样式文件链接到HTML文件内, 如<link href=”base.css” rel=”stylesheet” type=”text/css” />
  4. 优先级 在内联式、嵌入式、外部式样式表中CSS是在相同权值的情况下,一般来说离被设置元素越近优先级级别越高。

CSS选择器

每一条CSS声明(定义)由两部分组成,形式如下:

选择器{样式;} 在{}之前的部分就是”选择器”, “选择器”指明了{}中的”样式”作用于网页中的哪些元素。

标签选择器

标签选择题其实就是HTML代码中的标签,如<HTML>等

类选择器

类选择器在CSS样式中是最常用到的。

语法:.类选择器名称{CSS样式代码;}

注意:

1、英文圆点开头 2、其中类选择器名称可以任意起名

使用方法:

第一步:使用合适的标签把要修饰的内容标记起来,如 <span>类选择器</span> 第二步:使用class=“类选择器名称”为标签设置一个类,如 <span class=”cls”>类选择器</span> 第三步:设置类选择器css样式,如 .cls{color:red;}

ID选择器

在很多方面,ID选择器都类似于类选择器,但也有一些重要的区别: 1、为标签设置id=”id名称”,而不是class=”类名称”。 2、id选择符的前面是#号,而不是英文圆点(.)。

类和ID选择器的区别

  • ID选择器只能在文档中使用一次,而类选择器可以使用多次。
  • 可以使用类选择器词列表方法为一个元素同时设置多个样式,但id选择器不可以。

子选择器

加入大于符号(>)用于选择指定标签元素的第一代元素。

包含(后代)选择器

加入空格,用于选择指定标签下的后辈元素。

包含选择器和子选择器的区别

子选择器只能选择直接后代元素,而包含选择器可以选择所有元素。

通用选择器

通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配HTML中所有标签元素,如下面代码使用HTML中任意标签元素字体全部设置为红色:

* { clolr:red; }

伪类选择器

伪类选择器允许给HTML不存在的标签(标签的某种状态)设置样式,比如给HTML中的一个标签元素的鼠标滑过状态来设置字体颜色:

<html>
<head>
<style type="text/css">
a:hover{color:red;}
</style>
</head>

<body>
	<a>伪类选择器</a>
</body>
</html>

分组选择器

当你想为HTML中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码:

h1,span{color:red;}     /\*使用分组选择符*/

h1{color:red;}
h1{color:red;}			/\*相当于两行代码*/

CSS的继承、特殊性和层叠

继承

css的某些样式是具有继承性的。继承是一种规则,它允许样式不仅仅是用于某个特定HTML标签元素,而且应用于其后代,如某种颜色应用于p标签。但有一些css样式是不具有继承性的,如边框

特殊性

有时候我们为同一个元素设置了不同的css样式代码,那么元素会启用哪一个css样式?浏览器根据权值来判断使用哪种css样式,使用权值高的css样式。

权值的规则:

标签的权值为1, 类选择符的权值为10, ID选择符的权值为100, 继承也有权值但很低。

层叠

层叠胡原始股在HTML文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用(离元素最近优先级越高)。

css格式化排版

文字排版

  • 字体 为网页中的文字设置字体,现在网页一般喜欢设置“微软雅黑”,如下代码 body{font-family:"Microsoft Yahei";} 或 body{font-family:"微软雅黑";}
  • 字号、颜色 使用下面代码设置网页中文字的字号为12像素,并把字体颜色设置为#666(灰色): body{font-size:12px;color:#666}
  • 粗体 使用下面代码设置文字以粗体样式显示出来: p{font-weight:hold;}
  • 斜体 使用下面代码设置文字以斜体样式显示出来: p{font-style:italic;}
  • 下划线 使用下面代码设置文字以下划线样式显示出来: p{text-decoration:underline;}
  • 删除线 使用下面代码设置文字以删除线样式显示出来: p{text-decoration:line-through;}

段落排版

  • 缩进 中文文字中的段前习惯空两个文字的空白,这个样式可以使用下面的代码来实现: p{text-indent:2em;}
  • 行间距 使用下面代码实现段落行间距为1.5倍: p{text-height:1.5em;}
  • 中文字间距、字母间距 网页排版中设置文字间隔或者字母间隔可以使用 letter-spacing 来实现,如下面代码: h1{letter-sapce:50px;}

英文单词之间的间距:

h1{word-spacing:50px;}
  • 对齐 块状元素设置雨中样式可以使用text-align样式代码,举例:h1{text-align:center;} /\*文字居中*/ h1{text-align:left;} /\*文字居左*/ h1{text-align:right;} /\*文字居右*/

css盒模型

元素分类

在css中,HTML中的标签元素大体被分为三种不同的类型:块状元素、内联元素(行内元素)和内联块元素。

块级元素

在html中<idv>、<p>、<h1>、<form>、<ul>、<li>就是块级元素。设置display:block就是将元素显示为块级元素,使该元素具有块级元素的特点。

a{display:block;}

块级元素特点:

1、每个块级元素都是从新的一行开始,并且其后的元素也另起一行。 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下,是它本身父容器的100%,除非设定一个宽度。

内联元素

在htnl中,<span>、<a>、<label>、<strong>和<em>就是典型的内联元素(行内元素)(inline)元素。块级元素也可以通过代码display:inline将元素设置为内联元素

div{display:inline;}

内联元素特点:

1、和其他元素都在一行上; 2、元素的高度、宽度及顶部和底部的边距不可设置; 3、元素的宽度就是它包含的文字或照片的宽度,不可改变。

内联块状元素

内联块状元素就是同时具备内联元素和块状元素的特点,代码 display:inline-block就是将元素设置为内联块状元素。<img>、<input>标签就是这种内联块状标签。

inline-block元素特点:

1、和其他元素都在一行上; 2、元素的高度、宽度、行高以及顶部和底部边距都可设置。

盒模型–边框

盒子模型的边框就是围绕着内容及补白的线,这条线可以设置它的粗细、样式和颜色。

div{
border:2px  solid  red;
}

border代码的缩写形式分开写为:

div{
	border-width:2px;
	border-style:solid;
	border-color:red;
}

单独方向设置边框:

div{
border-bottom:1px solid red;
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
}

盒模型–宽度和高度

css定义的宽(width)和高(height)指的是填充以里的内容的范围。 因此一个元素(盒子)实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

div{
	width:200px;
	padding:20px;
	border:1px solid red;
	margin:10px;
}

如上元素的实际长度为:10px+1px+20px+200px+20px+1px+10px=262px。

盒模型–填充

元素内容与边框之间是可以设置距离的,称之为“填充”。填充也分为上右下左(顺时针)。

div{padding:20px 10px 15px 30px;}

将上面代码分开写:

div{
	padding-top:20px;
	padding-right:10px;
	padding-bottom:15px;
	padding-left:30px;
}
  • 如果上右下左的填充都为10px:
div{padding:10px;}
  • 如果上下填充都为10px,左右填充都为20px:
div{padding:10px 20px;}

盒模型–边界

元素与其他元素之间的距离可以使用边界(margin)来设置,边界也分为上右下左(顺时针)。

div{margin:20px 10px 15px 30px;}

将上面代码分开写:

div{
	margin-top:20px;
	margin-right:10px;
	margin-bottom:15px;
	margin-left:30px;
}
  • 如果上右下左的边界都为10px:
div{margin:10px;}
  • 如果上下边界都为10px,左右边界都为20px:
div{mairgin:10px 20px;}

css布局模型

css有三种基本的布局模型,流动模型(Flow)、层模型(Layer)和浮动模型(Float)。

流动模型

流动模型(Flow)是默认的网页布局模式。流动布局模型具有两个比较经典的特征: 1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上块状元素都会以行的形式占据位置。 2、在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。

浮动模型

可以用css定义为浮动,如div、p、table、img等元素都可以被定义为浮动。如下代码可以实现两个div元素一行显示。

#div{
	weith:200px;
	height:200px;
	border:2px red solid;
	float:left;
}
<div id="div1"></div>
<div id="div2"></div>

层模型

层布局模型就像是图像软件Photoshop中非常流行的图层编辑功能一样,每个图层能够精确定位操作。 层模型有三种形式: 1、绝对定位(position:absolute) 2、相对定位(position:relative) 3、固定定位(position:fixed)

绝对定位

如果想为元素设置层模型中的绝对定位,需要设置position:absolute,这条语句的作用是将元素从文档六中拖出来,然后使用left、right、top、bottom属性相对于最接近的一个具有定位属性的父包含块进行绝对定位,如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。 如下边代码可以实现div元素相对于浏览器窗口向右移动100px,向下移动50px。

#div1{
	width:100px;
	height:200px;
	border:2px red solid;
	position:absolute;
	left:100px;
	top:50px;
}
<div id="div1"></div>

相对定位

如果想为元素设置层模型中的相对定位,需要设置position:relative,它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置,相对定位完成的过程首先是按static(float)方式生成一个元素,然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保持不动。 如以下代码实现相对于以前位置向下移动50px,向右移动100px。

#div1{
	width:200px;
	height:200px;
	border:2px red solid;
	position:relative;
	left:100px;
	top:50px;
}

<div id="div1"></div>

固定定位

fixed:表示固定定位,与absolute定位类型相似,但它的相对移动的坐标是视图本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终定位于浏览器窗口内视图的某个位置,不会受文档流动影响。 以下代码可以实现相对于浏览器窗口视图向右移动100px,向下移动20px,并且拖动滚动条时位置固定不变。

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}

Relative和absolute组合使用

使用position:absolute实现被设置元素相对于其它元素进行定位,需要使用position:relative并且遵守下面规范:

  1. 参照定位的元素必须是相对定位元素的前辈元素:
<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>
  1. 参照定位的元素必须加入position:relative;
#box1{
    width:200px;
    height:200px;
    position:relative;
}
`
  1. 定位元素加入position:absolute;便可以用top、bottom、left、right来进行偏移定位了。
#box2{
    position:absolute;
    top:20px;
    left:30px;
}

这样box2就可以相对父元素box1定位了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 排序算法

    基本思想: 我们将一个待排序序列分为有序区和无序区(一般开始的时候将第一个元素作为有序区,剩下的元素作为无序区),每次将无序区的第一个元素作为待插入记录,按大小...

    Cloud-Cloudys
  • HTTPie的使用

    Cloud-Cloudys
  • 装饰器--python

    在代码运行期间动态的增加功能 装饰器(decorator)是修改其它函数功能的函数,是返回函数的高阶函数

    Cloud-Cloudys
  • 没人看系列----css 随笔

    kmonkey
  • CSS基础知识

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • iOS开关按钮,纯CSS给你安排上了

    今早搭完电梯出来信号不太好,切换飞行模式重启信号,发现iOS的「开关按钮」挺好玩的,顺便用纯CSS实现一番。

    JowayYoung
  • input中加入图片的做法

    有很多高大上的网站中都有这一做法。尤其是在登录页面,输入用户名和密码时加入小图标,看起来简单舒服。

    业余草
  • JS实现鼠标拖动div移动

    小小鱼儿小小林
  • Docker学习笔记之Docker应用于服务化开发

    上一节里我们谈到了小型的独立项目如何使用 Docker Compose 来搭建程序的运行环境,对于由多人或多部门参与的中大型服务化架构的项目,仅由一个 Dock...

    Jetpropelledsnake21
  • 超详细从零记录Hadoop2.7.3完全分布式集群部署过程

    超详细从零记录Ubuntu16.04.1 3台服务器上Hadoop2.7.3完全分布式集群部署过程。包含,Ubuntu服务器创建、远程工具连接配置、Ubuntu...

    王小雷

扫码关注云+社区

领取腾讯云代金券