首页 > 其他分享 >CSS的书写方式

CSS的书写方式

时间:2023-02-28 21:32:14浏览次数:30  
标签:方式 样式 书写 h1 color css CSS


 CSS的书写方式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
书写方式:内联样式(行内样式)
在标签中加入一个style属性,CSS的样式作为属性值
多个属性值之间用;进行拼接
-->
<h1 style="color: deeppink;font-family: '宋体';">这是一个h1标题</h1>
</body>
</html>

CSS的书写方式_CSS

CSS的书写方式_css_02

 

【2】内部样式:
 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
书写方式:内部样式:
head标签中加入一个style标签,在里面定位到你需要修饰的元素,然后在{}中加入你要修饰的样式。
-->
<style type="text/css">
h1{
color: royalblue;
font-family: 宋体;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
</body>
</html>

CSS的书写方式_html_03

CSS的书写方式_html_04

 

【3】外部样式:
首先要创建一个css文件,css文件的后缀.css
 

h1{
color: red;
font-family: 宋体;
}

CSS的书写方式_CSS_05

CSS的书写方式_css_06

 

再创建html页面:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入外部CSS资源:link-->
<link rel="stylesheet" type="text/css" href="css/mystyle.css"/>
</head>
<body>
<h1>这是一个标题</h1>
</body>
</html>

CSS的书写方式_CSS_07

CSS的书写方式_css_08

 

【4】实际开发中三种书写方式用的最多的是:
第三种:外部样式:因为这种方式真正做到了  元素页面和样式 分离

 

【5】三种书写方式优先级:
就近原则
 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入外部CSS资源:link-->
<style type="text/css">
h1{
color: yellow;
}
</style>
<link rel="stylesheet" type="text/css" href="css/mystyle.css"/>

</head>
<body>
<h1 style="color: red;">这是一个标题</h1>
</body>
</html>

CSS的书写方式_css_09

CSS的书写方式_CSS_10

 


标签:方式,样式,书写,h1,color,css,CSS
From: https://blog.51cto.com/u_15864767/6091833

相关文章

  • CSS的书写方式
     CSS的书写方式<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title></head><body>......
  • 求字符串长度的三种方式
    #include<stdio.h>#include<string.h>intlen_c1(char*arr){//自定义函数(无递归)intnum=0;while(*arr!='\0'){num++;arr++;}returnnum;}int......
  • 前端技术之CSS课程介绍和目标
    HTML可以让我们实现静态页面效果,但是页面没有炫酷好看的效果,通过CSS技术可以对静态页面进行“装修”,让页面更加好看美观。本套课程了解前端体系方向,为后续深入打下基础。课......
  • CSS的书写方式
    ​ CSS的书写方式<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title></head><body>......
  • CSS的书写方式
    ​ CSS的书写方式<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title></head><body>......
  • HTML5和CSS3基础
    HTML元素空元素不是所有元素都拥有开始标签、内容和结束标签。一些元素只有一个标签,通常用来在此元素所在位置插入/嵌入一些东西。这些元素被称为空元素例如:元素``是用......
  • chosen.css
    .chosen-container{position:relative;display:inline-block;vertical-align:middle;font-size:12px;height:31px;line-height:1.42857143;......
  • css易掉坑知识点整理之系列(二)
    之前也整理过系列(一),有兴趣的请点击:​​系列一​​。这是我在学习的过程中遇到的易错的或者易掉坑的css知识点的总结整理,嗯,还是会持续更新的2018/6/19今天遇到了一个base64格......
  • css hack
    一、CSS hack是什么?CSS hack是通过在css样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(不同的浏览器识别的符号是有不同的标准的,CSShack就是让我们记住这个标......
  • 路飞-day3——路飞前端全局css,全局配置文件、配置axios实现前后台交互、安装vue-cooki
    目录一、路飞前端全局css,全局配置文件1.1整理项目1.2设置全局css1.3配置全局js二、配置axios实现前后台交互三、安装vue-cookies四、安装elementui五、安装bootstrap和j......