css基础

会整活的小李
203 阅读4分钟
  • CSS 的 **引入方式 **及区别
  • 基础选择器 在 HTML 中选择元素
  • 字体和文本相关样式 修改文字样式
  • CSS 让页面中元素水平居中
css中文名称?
	层叠样式表(级联样式表)
css有什么作用?
	给html标签设置样式 美化网页 布局页面.

示例代码:

html:

<div>
   独占一行 
</div>

css:

 div {

            /* css样式 */
            /* 文本颜色 */
            color: red;
            /* 字体大小 */
            font-size: 30px;
            /* 背景颜色 */
            background-color: blue;
            width: 300px;
            height: 300px;

        }

css引入方式

  • 内嵌式

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内嵌式</title>
    <style>
        span {
            color: blue;
        }
    </style>
</head>

<body>

    <span>一行显示多个</span>
</body>

</html>

  • 外链式

    步骤:

    ​ 1.1 新建一个以.css结尾的后缀名文件

    ​ 1.2 通过link标签引入对应的css文件

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外链式</title>
    <link rel="stylesheet" href="./外链式.css">
</head>

<body>
    <div>外链式</div>
</body>

</html>

  • 行内式

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内式</title>
</head>

<body>
    <p style="font-size: 40px;color:red;">行内式</p>
</body>

</html>

基础选择器

选择器作用：选中页面中对应的标签（找她），方便后续设置样式（改她）

基本选择器我们主要讲解： 标签选择器、类选择器、id选择器、通配符选择器

标签选择器

语法:

标签名{
	/*css属性*/
	属性:属性值;
	属性:属性值;
}

html:

<div>独占一行</div>
<div>独占一行</div>
<div>独占一行</div>

css:

div{
    color:red
}

注意： 标签选择器是选择当前页面里面的所有一类标签，比如选择页面中所有的div标签，不是选其中一个。

类选选择器

样式点的定义， 结构类(class)调用

.类名{
	/*css属性*/
	属性:属性值;
	属性:属性值;
}

html:

<p class="box box1">我也会改变颜色和大小</p>

css:

.box {
            /* css属性 */
            /* 文本颜色 */
            color: red;
            /* 字体大小 */
            font-size: 30px;
        }

注意：

1.所有标签上都有class属性，class属性的属性值称为类名（类似于名字）

2.类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头

3.一个标签可以同时有多个类名，类名之间以空格隔开

4.类名可以重复，一个类选择器可以同时选中多个标签

id选择器

使用方法跟类非常的相似。 样式 #定义， 结构 id调用

语法:

#id名{
	/*css属性*/
	属性:属性值;
	属性:属性值;
}

html

<div id="box">id选择器</div>

css

 #box {
            /* 文本颜色 */
            color: red;
            /* 字体大小 */
            font-size: 40px;
        }

注意： 以后开发中，我们写样式，首先考虑用类选择器。

通配符选择器

语法

*{
	/*css属性*/
	属性:属性值;
	属性:属性值;
}
*表示选中所有的标签

html

 <div>多么痛的领悟你是我的全部</div>
    <div>多么痛的领悟你是我的全部</div>
    <span>多么痛的领悟你是我的全部</span>
    <h3>多么痛的领悟你是我的全部</h3>
    <p>多么痛的领悟你是我的全部</p>

css

*{
    color:red;
}

注意:特殊情况下才会使用,不要迷恋他哟,后期用来清除内外边距.

字体样式

字体大小

 <div>字体大小</div>

div {
            /* 字体大小 */
            font-size: 30px;
        }

注意:设置字体大小一定不要忘记加px单位

字体粗细

不加粗

 <h3>我不想变粗</h3>

 h3 {
     font-weight: normal;
     font-weight: 400;
 }

加粗

<span>吴亦凡</span>

span {
       /*关键字  */
        font-weight: bold; 
       /* 数字 */
        font-weight: 700;
 }

注意:设置字体粗细不要加单位哦,我们更提倡使用 数字来表示

字体样式

设置em i标签的文字不倾斜

em {
    font-style: normal;
}

字体系列

 font-family:'黑体';

字体连写

font:字体样式 字体粗细 字体大小 字体系列
font: italic 700 60px '黑体';
swsf(是我师傅)

注意:

必须严格遵循swsf这个顺序,各个属性值之间使用空格隔开.

字体样式 字体粗细可以省略,但是必须保留 字体大小 字体系列

字体连写不能随意颠倒顺序.

文本样式

首行缩进

text-indent:2em;
1em=当前一个字体大小

文本对齐

文本水平对齐
text-align:left|center|right

文本装饰

 /* 下划线  tdu*/
text-decoration: underline;
 /* 删除线 tdl */
 text-decoration: line-through;
/* 上划线 tdo*/
 text-decoration: overline;
/* 取消下划线 取消a标签默认的样式 */
 text-decoration: none;

a{
    /*取消a标签默认的样式*/
     text-decoration: none;
}

行高

line-height:40px;
font:20px/1.5 '黑体';

注意

行高写1.5表示的是倍数,当前字体大小的倍数

行高等于盒子的高度,单行文本会垂直居中

行高小于盒子的高度,单行文本会偏上

行高大于盒子的高度,单行文本会偏下

单行文本水平垂直居中:

html

<div>单行文本水平垂直居中</div>

css

div{
    width:300px;
    height:60px;
    text-align:center;
    line-height:60px;
}

水平居中

html

<div>水平居中</div>

css

div{
    width:300px;
    height:60px;
    /*文本水平居中*/
    text-align:center;
     /*盒子水平居中*/
    /*让div盒子在**浏览器水平居中*/
    margin:0 auto;
}

注意

/让div里面的内容水平居中/

text-align:center;

/让div盒子在浏览器水平居中/

盒子水平居中

margin:0 auto;

颜色取值

/* 颜色值*/
color:red;
/*rgb*/
color:rgb(0,0,0)
/*rgba*/
/* 黑色半透明*/
color:rgba(0,0,0,.5)
/* 十六进制*/
color:#ff0000
avatar
文章
阅读
粉丝