html中怎么内嵌CSS代码

发布时间:2022-03-10 16:43:36 作者:iii
来源:亿速云 阅读:558

这篇“html中怎么内嵌CSS代码”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“html中怎么内嵌CSS代码”文章吧。

一、认识CSS 

CSS是英文单词Cascading Style Sheets缩写,翻译为“样式表”,我们又称“CSS样式表”。通俗讲CSS是控制网页中内容的颜色、字体、文字大小、宽度、边框、背景、浮动等样式来实现各式各样、花样百出的网页样式的统称(CSS手册了解更多控制样式属性)。如大学是什么,大学里有计算机、教师、物理、化学、英语等专业系、院组成了一所大学,这就是大学。

二、CSS原理    

认识了CSS原理,相当于我们找到CSS下手学习入口,进入CSS世界。
转入正题,CSS原理模型例子:我们知道使用对讲机双方要通话,必须要在一定距离内(对讲机信号覆盖区),CSS一样,CSS要生效必须引入要正确(推荐style 和 link,内嵌CSS代码和引入CSS文件2种方式引入嵌入CSS);对讲机双方除了在信号范围内才能通话,还有最重要的就是双方频道频率(调频频率)要相同,CSS也是这样,要想CSS生效就需要在CSS代码的CSS选择器命名和HTML中class值或id的值的引用的CSS选择器命名相同。这样CSS选择器命名与html应用CSS类(class)值名相同后,这个CSS选择器里写不同样式属性,html对应部分网页内容样式就跟着你在CSS选择器里设置不同CSS属性样式而变化。

HTML与CSS本身是一个整体缺一不可,CSS代码表达的样式要实现就需要html中使用class或ID的值与CSS选择器的命名的名称相同。

三、DIVCSS5例子-style html中内嵌CSS代码法  

CSS代码(代码是放入html的head开始与结束标签内):
<style type="text/css">
.yangshi{ color:#F00;}/* 定义内容为红色 */
#abc{ color:#0F0;}/* 定义内容为绿色 */
</style>

对应在html调用(此代码是放入body区内):

<div class="yangshi">我是红色</div>
<div id="abc">我是绿色</div>

四、CSS原理与CSS实例说明   

1、css属性选择器与html中DIV标签内使用CLASS或ID引入CSS的命名的名称要相同。(如上例,CSS中.yangshi{...}对应HTML<div class="yangshi"></div>)
2、CSS代码写到什么地方(上例:使用style在html中内嵌CSS代码,当然可以使用LINK外部引入CSS文件)
3、CSS属性选择器命名自己可以取,而CSS样式属性是固定的,如宽度对应width


注意“yangshi”与"abc",对应到HTML里一个用class一个用ID,我们就需要认识CLASS与ID区别与CLASS ID用法。

从CSS原理我们主要是学习CSS与HTML关系,

五、下来你将接触到-必须学会与认识知识  

CSS 高度:学会控制网页内容与布局高度
CSS 宽度:学会使用CSS控制网页与布局宽度
CSS 注解:学会在CSS中注解、注释
class id:一定要搞清楚ID与CLASS
css id:一定搞清ID作用
css class:一定搞清楚CLASS用法作用及与ID区别
CSS 居中:内容居中、布局居中、垂直居中、上下左右居中
CSS 背景:CSS控制背景方法与CSS背景深入运用
CSS 字体:学会对文字、字体控制
CSS 工具:学会和认识常见CSS工具
CSS 手册:一定要收藏的遇到CSS问题或单词可以提供在线CS手册速查
html 基础:学CSS前必备功课

以上就是关于“html中怎么内嵌CSS代码”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

推荐阅读:
  1. html中怎么内嵌css样式
  2. CSS内嵌样式的定义

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css html

上一篇:CSS能解决什么问题

下一篇:global.css公共样式模板实例分析

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》