前端入门知识——css（1）

最新推荐文章于 2024-04-23 16:29:13 发布

前端头条

最新推荐文章于 2024-04-23 16:29:13 发布

阅读量338

点赞数 1

CC 4.0 BY-SA版权

分类专栏：程序员编程 web前端资讯科技 css HTML JavaScript 框架 HTML5 css3 文章标签：程序员编程 web前端资讯 css

本文链接：https://blog.youkuaiyun.com/tianduantoutiao/article/details/90678437

程序员同时被 3 个专栏收录

40 篇文章

订阅专栏

编程

40 篇文章

订阅专栏

web前端

40 篇文章

订阅专栏

CSS基本语法和引入方式

CSS介绍
为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。

css基本语法
css的定义方法是：

选择器 { 属性:值; 属性:值; 属性:值;}

选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。

代码示例：

div{ width:100px; height:100px; color:red }

CSS引入方法
css页面引入方法：

外联式：通过link标签，链接到外部样式表到页面中。
嵌入式/内嵌式：通过style标签，在网页上创建嵌入的样式表。
内联式：通过标签的style属性，在标签上直接写样式。
style标签，放在head标签里面，在style里面写样式；

在网站首页时建议使用，有助于性能优化，提升用户体验；
注意，嵌入式用的是style标签，而内联式用的是style属性；

/* css引入方法1 */
<link rel="stylesheet" type="text/css" href="css/main.css">

/* css引入方法2 */
<head>    
<style type="text/css">
div{ width:100px; height:100px; color:red }
......
</style>
</head>  

/* css引入方法3 */
<div style="width:100px; height:100px; color:red ">......</div>

css引入方式示例
示例1：引入css文件

/*01.引入css文件.html*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式引入</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 第一种插入样式的方式-外联式 -->
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div>这是一个div标签</div>

</body>
</html>

/*main.css*/

div {
    /*这里是css的注释*/
    font-size: 26px;
    color: blue;
}

示例2：嵌入式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内嵌式引入css样式</title>
    <!-- 第二种插入样式的方式-嵌入式 -->
    <style>
        div {
            font-size: 30px;
            color: red;
        }
    </style>
</head>
<body>

<div>这是一个div标签</div>
</body>
</html>

示例3：直接在标签中写样式示例-内联式/行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内嵌式引入css样式</title>
</head>
<body>
 <!-- 第三种插入样式的方式-内联式 -->
<div style="font-size: 20px;color: yellow">这是一个div标签</div>
</body>
</html>

三种方式总结：
推荐使用外联式，可以使用嵌入式，不太推荐使用内联式；
外联式嵌入式需要用到选择器，内联式不需要使用选择器，因为它直接在选择器里面；
外联式任何情况都能使用，嵌入式在网站首页优化可以使用；
嵌入式用的是style标签，而内联式内联式用的是style属性；
首页优化用嵌入式，其他用外联式；

CSS文本设置

常用的应用文本的css样式：

color 设置文字的颜色，如： color:red;
font-size 设置文字的大小，如：font-size:12px;
font-family 设置文字的字体，如：font-family:‘微软雅黑’;
font-style 设置字体是否倾斜，如：font-style:‘normal’; 设置不倾斜，font-style:‘italic’;设置文字倾斜；但一般是用来设置不倾斜的。
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗。
font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗字号/行高字体；如： font:normal 12px/36px ‘微软雅黑’;
line-height 设置文字的行高，如：line-height:24px;
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉，常用于将a标签的下划线去掉；
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px；一个汉字占20px，两个汉字40px。
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中；span，a标签等只让文字撑开的，暂时不能居中，p，div占一行的，能居中。
01：文本样式应用实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本常用样式</title>
    <style>
        div {
            font-size: 22px;
            color: red;
            /*font-family: "微软雅黑";*/  /*可以写中文，但建议写英文，避免可能出现的乱码*/
            font-family: "Microsoft YaHei UI";
            font-style: italic;
            font-weight: bold;
            line-height: 20px;
        }
    </style>
</head>

<body>
<div>
    常用的应用文本的css样式：
    color 设置文字的颜色，如： color:red;
    font-size 设置文字的大小，如：font-size:12px;
    font-family 设置文字的字体，如：font-family:'微软雅黑';
    font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜
    font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
</div>
</body>
</html>

02：常用的文本应用css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本常用样式</title>
    <style>
        div {
            font-size: 22px;
            color: red;
            /*font-family: "微软雅黑";*/  /*可以写中文，但建议写英文，避免可能出现的乱码*/
            font-family: "Microsoft YaHei UI";
            font-style: italic;
            font-weight: bold;
            line-height: 30px;
            text-decoration: underline;
            text-indent: 40px;
        }
        a {
            text-decoration: none;
        }
        p {
            text-align: center;
        }
    </style>
</head>

<body>
<div>
    常用的应用文本的css样式：
    color 设置文字的颜色，如： color:red;
    font-size 设置文字的大小，如：font-size:12px;
    font-family 设置文字的字体，如：font-family:'微软雅黑';
    font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜
    font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
</div>
<p>这是一个span标签</p>
<a href="http://www.baidu.com">百度一下，你就知道</a>
</body>
</html>

最后，给大家推荐一个前端学习进阶内推交流圈子（前端资料分享），不管你在地球哪个方位，
不管你参加工作几年都欢迎你的入驻！（会定期免费提供一些收藏的免费学习书籍资料以及整理好的面试题和答案文档！）

如果您对这个文章有任何异议，那么请在文章评论处写上你的评论。

如果您觉得这个文章有意思，那么请分享并转发，或者也可以关注一下表示您对我们文章的认可与鼓励。

愿大家都能在编程这条路，越走越远。