CSS
css概念
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.
有时我们也会称之为 CSS 样式表或级联样式表。
CSS也是一种标记语言
css作用:美化页面,让html页面更漂亮,让页面布局更简单,结构样式相分离
CSS的实现:宽高,边框,颜色,位置,字体,图片等.
css语法规范
CSS 规则由两个主要的部分构成:选择器以及一条或多条声明.
CSS必须作用在HTML上才会有效,不能单独运行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css语法体验</title>
<style>
/* 语法规范:
选择器名称空格{
属性:属性值;
属性:属性值;
} */
p {
/* 设置字体颜色 */
color: red;
/* 设置字体大小 */
font-size: 25px;
}
</style>
</head>
<body>
<p>昨晚熬夜太晚,手机突发发错震动的声音,打开一开是一位小姐姐对我说,明天约你看电影,来吗</p>
</body>
</html>
CSS样式都包含在一般写到标签里面,在style标签里面书写样式。
1.选择器
选择器分类
基础选择器:标签选择器;类选择器;ID选择器;通配符选择器
复合选择器:后代选择器;子选择器;并集选择器;伪类选择器
1.1 基本选择器
标签选择器: 就是通过标签名字来找元素
语法:
<style>
/*
标签名 {
属性:属性值;
}
*/
p {
color: green;
}
div {
color: hotpink;
}
</style>
作用:给页面上面指定的标签设置样式 .
缺点:如果大量使用标签选择器,那么页面上很多的元素就会是同一效果,不能差异化设置.
1.2类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
.类名 {
属性:属性值;
}
*/
.box{
color: red;
}
/* 记忆口诀:样式点定义,结构类调用。实际开发中用的比较多 */
</style>
</head>
<body>
<p class="box">这是红色</p>
<div class="box">我也想变成红色</div>
</body>
</html>
命名规范
- 不能是中文
- 不能是标签名字 div span a等,因为有标签选择器
- 不能是点+数字
多类名使用
每一个标签都有class的属性,它的属性值我们通常称为 类名 class属性的值有多个每一个类名需要使用空格分隔.
<div class="类名1 类名2 类名3 类名N"></div>
注意点:如果多个类名同时作用于一个标签,并且样式是设置一样的 ,要观察css代码的书写顺序,写在后面会把写在前面的样式给覆盖掉.
1.3 id选择器(了解即可)
HTML元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以“#" 来定义id选择器能保证该名字唯一,常用在JS中实现.
注意:在一个网页中不能出现两个名字相同的id,不能多次使用,类选择器可以一次定义多次使用.
1.4通配符选择器
在 CSS 中,通配符选择器使用*定义,它表示选取页面中所有元素(标签)
2.字体属性
字体属性:用于定义字体系列、大小、粗细、和文字样式(如斜体)
font-family:字体类型设置字体类型,网页中常用的字体类型有宋体 微软雅黑 黑体等.
font-size: 字体大小设置文字的大小的 要加单位 通常单位是px 一般是给body标签设置文字大小 它可以控制这个网页里面所有的文字大小 .
font-weight:字体粗细设置字体是否加粗.取值为:400或者 normal 将加粗的文字设置为正常,700 或者 bold 将正常的文字设置为加粗的效果.
font-style:字体风格 设置字体风格,取值为:normal(不倾斜 默认值) italic(倾斜)
字体复合写法
font: font-style font-weight font-size/line-height font-family
例如:
font: italic 700 30px '楷体';
说明:一次可以同时设置多个针对于字体的属性,每一个属性要用空格分隔.
注意事项:font-style与font-weight 可以省略不写 font-size与font-family 必须要写,否则font属性将不起作用.
line-height:行间距
3.文本属性
文本颜色:CSS Text(文本)属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等.
文本对齐
text-align:
- left(左)
- center(中)
- right(右)
它只能将块元素里面的文字进行对齐,行内元素不行
扩充,想要将行内元素里面的内容进行水平对齐,需要将行内元素包裹到一个块元素里面,然后给块元素设置水平对齐方式就OK.
文本装饰属性
text-decoration:
- none(清除修饰线)
- underline 添加下划线
- overline 添加上划线
- line-through 添加删除线
文本缩进
text-indent:
- 26px
- 2em
行间距
line-height:
- 30px
4.css引入方式
1行内样式表(行内式) 内部样式表(内嵌样式表)是写到html页面内部. 是将所有的 CSS 代码抽取出来,单独放到一个 <style>
标签中.
2. 内部样式表(嵌入式) 行内样式表(内联样式表)是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式.
3. 外部样式表(链接式)
第一步:先要创建一个以xxxx.css
为扩展名的文件
第二步:在对应的html文件中 需要使用<link rel="stylesheet" href="要引入的css文件的路径">
优点:一个css文件可以被多个html文件所引用
特点:一个html文件可以使用link引入多个css文件