前端CSS基础

最新推荐文章于 2024-08-11 22:22:51 发布

步步生花@苏殿主

最新推荐文章于 2024-08-11 22:22:51 发布

阅读量215

点赞数

分类专栏： HTML+CSS基础学习文章标签：前端 css3

本文链接：https://blog.csdn.net/sjp991012/article/details/123542848

版权

HTML+CSS基础学习专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一、CSS引入方式

1、内嵌式

写在style标签中，通常约定写在head标签中
常用于小案例

<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>Document</title>
    <style>
        p{
            color: blue;
            font-size: 30px;
        }
    </style>
</head>

2、外联式

写在一个单独的.css文件中,通过link标签在网页中引用
常用于项目中

<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>Document</title>
    <link rel="stylesheet" href="./demo.css">  <!-- 外联式 -->
</head>

3、行内式

写在标签的style属性中
常配合js使用

<body>
    <p style="color: aqua;font-size: 32px;">我是p标签</p>
</body>

二、基础选择器

1、标签选择器

结构：标签名 { 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>Document</title>
    <style>
        p{
            color: blue;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>我是p标签</p>
    <p>我是什么颜色的</p>
    <p>再来</p>
</body>
</html>

代码运行效果：
在这里插入图片描述

2、类选择器

结构：. 类名 { css属性名 : 属性值 ; }
所有标签上都有class属性，class属性的属性值称为类名
类名可以由数字、下划线、字母、中划线组成，但不能以数字、中划线开头
一个标签可以有多个类名，类名之间用空格隔开
类名可以重复，一个类选择器可以同时选中多个标签

<!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>Document</title>
    <style>
        .size{
            
            font-size: 30px;
        }
        .color{
            color: rgb(225, 0, 255);
        }
    </style>
</head>
<body>
    <p class="size">我是p标签</p>
    <p class="color">我是什么颜色的</p>
    <p class="color size">我要变大，也要颜色</p>
</body>
</html>

代码运行效果：

在这里插入图片描述

3、id选择器

结构：# id 属性值 { css属性名 : 属性值 ; }
所有标签上都有id属性
id属性值在一个页面中是唯一的，不可重复的
一个标签只能有一个id属性值
一个id选择器只能选中一个标签

<!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>Document</title>
    <style>
        #color{
            color: rgb(255, 0, 140);
        }
    </style>
</head>
<body>
    <p id="color">我是p标签</p>
</body>
</html>

代码运行效果：
在这里插入图片描述

4、通配符选择器

结构：* { 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>Document</title>
    <style>
        *{
            color: rgb(255, 30, 0);
        }
    </style>
</head>
<body>
    <p id="color">我是p标签</p>
    <h1>我是h1标签</h1>
    <span>我是span标签</span>
    <div>我是div标签</div>
</body>
</html>

代码运行效果：
在这里插入图片描述

三、字体和文本样式

1、字体样式

字体大小：font-size : 数字 + px
字体粗细：font-weight：normal / bold /100~900
字体样式（是否倾斜）：font-style : normal / italic
字体系列：font-family:具体字体1,具体字体2,···,字体系列
字体font：复合属性 font:style weight size family，（只有前两个可以省略）

字体介绍

具体字体：“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等······
字体系列：sans-serif（无衬线字体，例如黑体，多用于网页）、serif（衬线字体，例如宋体，多用于报刊书籍）、monospace（等宽字体，多用于代码便希望）等
渲染规则：从左往右，若电脑未安装该字体，则显示下一个字体；如果都不支持，则会根据操作系统，显示最后字体系列的默认字体
如果字体名称中存在多个单词，推荐使用引号包裹
最后一项字体系列不需要引号包裹
网页开发时，建议使用系统常见的自带字体，保证不同用户浏览网页都可以正确显示

<!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>Document</title>
    <style>
        p{
           font-size: 34px;
        }
        h1{
            font-weight: bold; /* 加粗 */
            font-style: italic; /* 倾斜 */
        }
        span{
            font-family: 微软雅黑,黑体,sans-serif;
        }
        div{
            font:italic 700 32px 宋体；
        }
        a{
            font:700 64px 黑体
        }
    </style>
</head>
<body>
    <p>我是p标签，变大</p>
    <h1>我是h1标签</h1>
    <span>我是span标签，字体</span>
    <div>我是div标签，符合属性</div>
    <a href="#">我是超链接</a>   
</body>
</html>

代码运行效果：
在这里插入图片描述

2、文本样式

（1）文本缩进

text-indent
取值方式一：数字+px
取值方式二：数字+em（推荐：1em=当前标签的font-size的大小）

<!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>Document</title>
    <style>
        .em{
           text-indent: 2em;
        }
        .px{
            text-indent: 42px;
        }
    </style>
</head>
<body>
    <p class="em">由刘进执导，孙俪、赵又廷领衔主演的都市职场剧《理想之城》3月17日在山西卫视黄金剧场播出，主要讲述了造价师苏筱的成长之路。职场小人物赶项目、熬夜改稿、内部斗争以及工程出事了如何背黑锅等现实问题，通过剧中人物和故事线体现出来。该剧跳出了职场大女主无往而不胜的套路，以建筑行业为背景，讲述现实生活的窘迫，女性事业成长的艰辛，人生况味之复杂，企业文化之初心和理想，体现了创作者的现实主义追求。</p>
    <p class="px">由刘进执导，孙俪、赵又廷领衔主演的都市职场剧《理想之城》3月17日在山西卫视黄金剧场播出，主要讲述了造价师苏筱的成长之路。职场小人物赶项目、熬夜改稿、内部斗争以及工程出事了如何背黑锅等现实问题，通过剧中人物和故事线体现出来。该剧跳出了职场大女主无往而不胜的套路，以建筑行业为背景，讲述现实生活的窘迫，女性事业成长的艰辛，人生况味之复杂，企业文化之初心和理想，体现了创作者的现实主义追求。</p>
</body>
</html>

代码运行效果：
在这里插入图片描述

（2）文本水平对齐方式

如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置

`text-align`属性值	效果
`left`	左对齐
`center`	居中对齐
`right`	右对齐

<!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>Document</title>
    <style>
       body{
           text-align: center;
       }
       h1{
           text-align: center;
       }
       div{
           text-align: right;
       }
    </style>
</head>
<body>
    <h1>标题</h1>
    <div>作者</div>
    <hr>
    <img src="./images/9.jpeg" alt="" width="300">
</body>
</html>

代码运行效果：
在这里插入图片描述

（3）文本修饰

`text-decoration`属性值	效果
`underline`	下划线（常用）
`line-through`	删除线（不常用）
`overline`	上划线（几乎不用）
`none`	无装饰性（常用）

<!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>Document</title>
    <style>
       .p1{
           text-decoration: underline;
       }
       .p2{
           text-decoration: line-through;
       }
       .p3{
           text-decoration: overline;
       }
       a{
           text-decoration: none;
       }
    </style>
</head>
<body>
   <p class="p1">ndskj</p>
   <p class="p2">9999</p>
   <p class="p3">234</p>
   <a href="#">a</a>
</body>
</html>

代码运行效果：
在这里插入图片描述

3、line-height行高

控制一行的上下间距
取值方式一：数字+px
取值方式二：倍数（当前标签的font-size的倍数）
让单元文本垂直居中时，可以设置line-height:文字父元素高度
网页精准布局时，会设置line-height:1，可以取消上下间距
行高与font连写：font:style weight size/line-height family

<!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>Document</title>
    <style>
       .p1{
           line-height: 1.5;
       }
       .p2{
           font: italic 400 20px/32px 宋体;
       }
    </style>
</head>
<body>
   <p class="p1">由刘进执导，孙俪、赵又廷领衔主演的都市职场剧《理想之城》3月17日在山西卫视黄金剧场播出，主要讲述了造价师苏筱的成长之路。职场小人物赶项目、熬夜改稿、内部斗争以及工程出事了如何背黑锅等现实问题，通过剧中人物和故事线体现出来。该剧跳出了职场大女主无往而不胜的套路，以建筑行业为背景，讲述现实生活的窘迫，女性事业成长的艰辛，人生况味之复杂，企业文化之初心和理想，体现了创作者的现实主义追求。</p>
   <p class="p2">由刘进执导，孙俪、赵又廷领衔主演的都市职场剧《理想之城》3月17日在山西卫视黄金剧场播出，主要讲述了造价师苏筱的成长之路。职场小人物赶项目、熬夜改稿、内部斗争以及工程出事了如何背黑锅等现实问题，通过剧中人物和故事线体现出来。该剧跳出了职场大女主无往而不胜的套路，以建筑行业为背景，讲述现实生活的窘迫，女性事业成长的艰辛，人生况味之复杂，企业文化之初心和理想，体现了创作者的现实主义追求。</p>  
</body>
</html>

代码运行效果：
在这里插入图片描述

4、样式的层叠问题

给同一个标签设置了相同的样式，此时样式会重叠（覆盖），写在最下面的会生效

四、拓展

1、谷歌调试工具

F12或Fn+F12

2、颜色取值

color文字颜色
background-color背景颜色

表示方式	属性值
关键词	red、green······
rgb表示法	rgb(0,0,0) rgb(255,255,255)·····
rgba表示法	rgba(0,0,0,0.5) rgba(255,255,255,0.3)·····
十六进制表示法	#000000、#ff00rf、#000、#fff······

3、标签居中

margin:0 auto

  <div style="background-color: aqua;width: 200px;height: 200px; margin: 0 auto;"></div>

代码运行效果：
在这里插入图片描述

步步生花@苏殿主

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端CSS基础

文章目录一、CSS引入方式1、内嵌式2、外联式3、行内式二、基础选择器1、标签选择器2、类选择器3、id选择器4、通配符选择器三、字体和文本样式1、字体样式2、文本样式（1）文本缩进（2）文本水平对齐方式3、line-height行高4、样式的层叠问题一、CSS引入方式1、内嵌式写在style标签中，通常约定写在head标签中常用于小案例<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Co
复制链接

扫一扫