你好,欢迎访问我的博客!登录注册 捐助本站 免责声明 畅所欲言 文章归档
当前位置:首页 - 行业资讯 - 前端教学 - 正文 君子好学,自强不息!

前端教学之CSS基本语法---1

2017-12-29前端教学漫步白月光267°c
A+ A-

经过一周的学习,相比大家已经对html有了一个基本的认知,那么下来我们来学习一下css,有的小伙伴可能会问,这些都有什么关系呢?那么我来给大家解释一下

html网页内容的基本载体

css样式是控制网页外观的表现形式

javascript是用来实现一些网页特效的

等我css跟大家讨论完,后期还有有javascript的一些基本教程

首先css是层叠样式表,它的全称是cascading style sheets,用来定义浏览器html的显示样式。

css规则由两部分组成:选择器,声明

CSS必须用英文状态下输入!

CSS写法

<head>
    <meta charset="UTF-8">
    <title>漫步白月光css基础</title>
    <style type="text/css">
    p{color: red; font-size: 20px;font-family: 微软雅黑; }
    </style>/*这是一个CSS样式*/
    </style>
</head>

由上例我们可以看出,css需要写在head标签内,

    <style type="text/css">
    CSS样式
    </style>

大家来做一个自己的CSS样式吧~

代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光css基础</title>
<style type="text/css">
    p{color: red; font-size: 20px;font-family: 微软雅黑; }
    </style>
    <style type="text/css">
    h2,h3,h4,h5{
                color: green;
                font-family: 隶书;
                   }/*这是一个css注释*/
     h1{color: blue;font-size: 40px;}              
    </style>
    
</h=ad>
<body>
<h1>CSS基础</h1>
<h2>CSS基础</h2>
<h3>CSS基础</h3>
<h4>CSS基础</h4>
<h5>CSS基础</h5>
<p>
臣本布衣,躬耕于南阳,苟全性命于乱世,不求闻达于诸侯。
先帝不以臣卑鄙,猥自枉屈,三顾臣于草庐之中,咨臣以当世之事,由是感激,遂许先帝以驱驰。
</p>

</body>
</html>
CSS样式引用归类以及使用方法总结1.2.3.4代表优先级
分类使用方法位置加载说明
行内样式(1)在开始标签内嵌stylehtml文件内同时加载
内部样式(2)在<head>中<stype>内html文件内同时加载
链接外部样式(常用)(4)<head>中<link>内css文件与html文件分离页面加载时也加载css样式
导入式@import3(3)在<stype>内最开始css文件与html文件分离加载完页面以后再加载css

外部样式(link)与内部样式的优先级取决于样式所在的位置(就近原则)

下面大家来练习一下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光css基础</title>
<style type="text/css">
    p{color: red; font-size: 20px;font-family: 微软雅黑; }
    </style>
    <style type="text/css">
                 @import url(css/css1.css);
                 h1{
                color: green;
                font-family: 隶书;
                   }/*这是一个css注释*/
    </style>
    <link rel="stylesheet" type="text/css" href="css/css1.css">
</head>
<body>
<h1>CSS基础</h1>
<h2>CSS基础</h2>
<h3>CSS基础</h3>
<h4>CSS基础</h4>
<h5 style="color: #FF8F59">CSS基础</h5>
<p>
臣本布衣,躬耕于南阳,苟全性命于乱世,不求闻达于诸侯。
先帝不以臣卑鄙,猥自枉屈,三顾臣于草庐之中,咨臣以当世之事,由是感激,遂许先帝以驱驰。
</p>

</body>
</html>
h2{color: #FF95CA;font-size: 30px; }
h3{color: #ADADAD;font-size: 50px;font-family: 隶书}
h4{color: #EAC100;font-size: 40px;font-family: 微软雅黑}
h5{color: #5151A2;font-size: 60px; }


今天css的基本语法小白就先跟大家聊到这里啦,多看多写多背多查

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
前端教学之CSS基本语法---1

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>


  用户登录
  注册