web前端技术css(一)_要向着光的博客-爱代码爱编程
一、CSS(Cascading Style Sheets)
CSS指的是层叠样式表(Cascading Style Sheets),是一种用来表现HTML文件样式的计算机语言。
HTML标签用来描述网页的语义,CSS用来描述网页的样式。
二、CSS语法
CSS规则由两个主要的部分组成:选择器和声明。
选择器通常是需要改变样式的HTML元素。
每条声明由一个属性和一个值组成。
多条声明CSS声明用分号分隔,声明块用花括号括起来
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
三、CSS选择器
选择器是用来标记CSS样式能够起到的标签范围
1、id选择器(唯一标记)
id选择器使用HTML元组的id属性来选择特定的元素,元素的id在页面中是唯一的,因此的选择器用于选择一个唯一的元素
要选择具有特定的id元素,要写一个‘#’,后跟该元素的id
#parallel{
text-align:center;
color:red;
}
注意:id不能以数字开头。
2、class选择器(类选择器)
类选择器选择有特定的class属性HTML元素,如需选择特定的class元素,要写一个‘.’字符,后面跟类名
.center{
text-align:center;
color:blue;
}
注意:类名不能以数字开头。
3、html元素选择器
四、CSS的引用方式
1、外部样式表
通过使用外部样式表,只需修改一个文件即可改变整个网站的外观
每张HTML页面必须在head部分的<link>元素包含对外部样式表的引用
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
外部样式表可以在任何文本编辑器中编写,并且必须以 .css 扩展名保存。
外部 .css 文件不应包含任何 HTML 标签。
"mystyle.css" 是这样的:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
注意:请勿在属性值和单位之间添加空格。
2、内部样式表
如果一张 HTML 页面拥有唯一的样式,那么可以使用内部样式表。
内部样式是在 head 部分的 <style> 元素中进行定义。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
3、内联样式
内联样式可用于为单个元素应用唯一的样式。
如需使用内联样式,请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
优先级:内联样式>内部样式表>外部样式表
五、CSS注释
注释用于解释代码,浏览器会忽略注释。
位于 <style>元素内的 CSS 注释,以 /*
开始,以 */
结束:
/* 这是一条单行注释 */
p {
color: red;
}
注释能横跨多行:
/* 这是
一条多行的
注释 */
p {
color: red;
}
六、CSS颜色的表示法
1、英文单词表示,red、green、pink等等
2、rgb表示法:rgb(255,0,0);
red/green/blue(红绿蓝),光学显示器每个像素都是由这三原色的发光原件组成,靠明亮度不同来达到显示不同颜色的效果。每个颜色取值范围0-255,共256个,即8个bit,2的8次方。
3、16进制表示法:#FF0000;
共6位,1-2位表示red,3-4位表示green,5-6位表示blue。
七、A标签的伪类
同一个标签,根据用户的某种状态不同,有不同的样式,称为“伪类”
1、link 用户没有点击过的链接状态
2、visited 用户点击过的链接状态
3、hover 用户鼠标悬停到链接上的状态
4、active 用户鼠标点击且不松手之前的状态
注意:在css中必须按照上述固定顺序写,否则失效
八、盒模型
所有标签都可以看做一个盒子
盒模型的五个重要属性:
1、width:内容宽度
2、height:内容高度
3、padding:内边框
padding
属性用于在任何定义的边界内的元素内容周围生成空间。(相当于内容和盒子的距离)
通过 CSS,可以完全控制内边距(填充)。
eg:padding:10px 10px 10px 10px;(上右下左)
4、margin:外边距
margin属性用于在任何定义的边框之外,为元素周围创建空间(相当于一个和盒子和另一个盒子之间的距离)
eg:margin:10px 10px 10px 10px;(上右下左)
5、border:边框
border属性允许指定元素边框的样式,宽度和颜色(相当于盒子的厚度)
eg:border:6px soild blue(粗细,线性,颜色)
拆分:
padding:10px; 上下左右10px
padding:10px 20px; 上下10px,左右20px
padding: 10px 20px 30px 上10px 右左20px,下30px
padding-top: 10px; 上
padding-left: 20px; 左
padding-bottom: 10px; 下
padding-right: 10px;右
margin同上
1、按照方向拆开
1)border-top: 10px solid #000; 上
2)border-bottom: 10x dotted #000;下
3)border-right: 90px double #000;左
4)border-left: 90px dashed #000;右
2、按要素拆开
1)border-width: 10px 20px 30px 40x;
2)border-style: dashed solid dotted dashed;
3)border-color: red blue pink yellow;
3、按要素和方向拆开
border-bottom-color ……
盒子水平居中:
margin:0 auto;
在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。
假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素,请看下图: