css折叠样式(1)——使用css样式的三种方式

一、css的声明标签是告诉浏览器应该是用什么形式去解析你,一般为:<!DOCTYPE html>  因为html5支持向下兼容,详细可看上图。

二、css样式的使用方式:

(1)内链样式表:

demo.html

<!DOCTYPE html>
<html>
<head>
    <title>内链样式使用</title>
    <meta charset="utf-8">
</head>
<body style="background-color:green; margin:0; padding:0;">
    <h1>内链样式使用</h1>
    <div style="background-color:red;font-size:20px;">
    内链样式使用
    <div>
</body>
</html>

(2)嵌入式样式表:

demo.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>嵌入式样式</title>
    <style type="text/css">
    <!--HTML标记定义 -->
        body{
            background:yellow;font-size:20px
        }
        div{
            background:red;font-size:40px
        }  

        
    </style>
</head>
    
<body>
    <h1>嵌入式样式</h1>
    <div>嵌入式样式</div>
</body>

</html>

(2)引入式样式表:

demo.htnl

<!DOCTYPE html>
<html>
<head>
    <title>引入式样式</title>
    <meta charset="utf-8">
    
    <!--style.css就是指定的样式,href为指定路径作用-->   
    <link rel="stylesheet" type="text/css" href="style.css">
    
   
</head>
<body>
    <h1>引入式样式</h1>
    <a href="http://www.baidu.com" target="_blank">百度</a>
    <br>
    <p>引入式样式</p>
    <div>css的html选择器</div>
</body>

</html>

style.css

/* HTML样式定义   */
body{
    background-color:yellow;
    color:#fff
}

div{
    background:red;font-size:20px
}
时间: 2024-08-04 19:04:15

css折叠样式(1)——使用css样式的三种方式的相关文章

python 中增加css样式的三种方式

增加css样式的三种方式: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!--head中style是第一处写css样式的地方--> 7 <style> 8 .cl{ 9 /*背景色*/ 10 background-color

三种方式来插入样式表

如何使用样式 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化.有以下三种方式来插入样式表: 外部样式表 当样式需要被应用到很多页面的时候,外部样式表将是理想的选择.使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观. <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> 内部样式表 当单个文件

css 圣杯布局三种方式

所谓的圣杯布局就是左右两边大小固定不变,中间宽度自适应.我们可以用浮动.定位以及flex这三种方式来实现 一般这种布局方式适用于各种移动端顶部搜索部分,这是最常见的,如京东手机版主页面顶部搜索: 可以看到左边有个菜单按钮,中间是搜索框,右边是登录两个文字,左右大小是固定的,而中间部分则是随着手机屏幕尺寸的大小而自适应.   第一种方法 float实现: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 &

CSS基础知识总结之css样式引用的三种方式

在html中增加css样式有三种: 1.在标签中增加style属性: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>天蓝蓝</title> <!--tag标签的图标--> <link rel=&

css使用的三种方式

方式一:行内样式 特点: 1)在一个标签内使用style属性编写css内容 2) 好处:直接和直观    弊端:是只对当前标签起作用 方式二: 内部样式 特点: 1)通常会在html的<head>标签内使用<style>标签编写css内容 2)好处: 可以一次性控制多个标签   弊端:html代码和css都写在html文件中,不好维护 方式三: 外部样式(推荐使用) 特点: 1)独立一个css后缀的文件编写css内容,然后在html文件中使用<link>标签导入外部cs

HTML中放置CSS的三种方式和CSS选择器

(一)在HTML中使用CSS样式的方式一般有三种: 1 内联引用 2 内部引用 3 外部引用. 第一种:内联引用(也叫行内引用) 就是把CSS样式直接作用在HTML标签中. <p style="font-size: 10px; color: #FFFFFF;"> 使用CSS内联引用表现段落. </p> 特点:内联的样式比其他方法更加灵活,但需要和展示的内容混淆在一起,内联样式会失去一些样式表的优点. 第二种:内部引用(也叫内嵌式) 使用style标签直接把CSS

第十一节 CSS引入的三种方式

1 <!-- CSS:层叠样式表,有了CSS,HTML中大部分表示样式的标签就废弃不用了,HTML只负责文档的结构和内容,表现形式完全交给CSS,HTML文档变得更加简洁,方便爬虫爬取 --> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title>

CSS(面试第1天)line-height三种赋值方式有什么区别?

1.line-height三种表示方法(带单位,纯数字,百分比) /*直接在某个元素上使用,下面三种没有区别*/ p{line-height: 1.5em;} p{line-height: 1.5;} p{line-height: 150%;} 2.三者只是在给父元素使用行高,子元素继承的方式有区别 带单位:px(不用计算),em则会使元素以其父元素font-size值参考来计算自己的行高 纯数字:把比例传递给后代,例如父级行高为1.5,子元素字体为18px,则子元素行高为1.5*18=27px

css清除浮动的三种方式

1.父级元素结束之前加入空div,div的样式中有“clear:both” 2.父级元素设置样式"overflow:hidden".原因:“为什么加入overflow:hidden即可清除浮动呢?那是因为overflow:hidden属性相当于是让父级紧贴内容,这样即可紧贴其对象内内容(包括使用float的div盒子),从而实现了清除浮动.Css overflow:hidden清除浮动方法DIVCSS5推荐使用.” 3.父级元素设置class样式"clearfix"