CSS Day04 css核心基础

1.在HTML中引入CSS的方法

　　（1）行内式

　　　　行内式即在标记的style属性中设定CSS样式，这种方式本质上没有体现出CSS的优势，因此不推荐使用。
　　　　例如：
　　　　　　　 <h1 style=“color:white; background-color:blue”>这是一行文本/h1>

　　　　例1：

1 <html>
2     <head>
3         <title>行内式</title>
4     </head>
5     <body>
6         <h2 style="text-align: center;background-color: red;color: #eeeeee;">这是行内式</h2>
7         <p style="text-align: center;background-color: blue;color: green;width:500px;height:200px;line-height:200px;">这是一个段落!</p>
8     </body>
9 </html>

　　（2）嵌入式
　　　　嵌入式将对页面中各种元素的设置写在<head></head>之间。
　　　　例如：
　　　　　　 <style type="text/css">
　　　　　　h1{
　　　　　　　　　　 color:white;
　　　　　　　　　　background-color:blue；
　　　　　　　 }
　　　　　　</style>

　　　　例2：

 1 <html>
 2     <head>
 3         <title>嵌入式</title>
 4         <style type="text/css">
 5             h2{
 6                 text-align: center;background-color: blue;color: green;
 7             }
 8             p{
 9                 text-align: center;background-color: red;color: #eeff11; width:300px;height:300px;line-height:300px;
10             }
11
12         </style>
13     </head>
14     <body>
15         <h2>这是嵌入式</h2>
16         <p>这是一个段落!</p>
17     </body>
18 </html>

　　（3）导入式
　　　　　<style type="text/css">
　　　　　　　@import"mystyle.css";
　　　　　</style>

　　　例3： 1）

 1 <html>
 2     <head>
 3         <title>嵌入式</title>
 4         <style type="text/css">
 5             @import"mystyle.css";
 6         </style>
 7     </head>
 8     <body>
 9         <h2>这是嵌入式</h2>
10         <p>这是一个段落!</p>
11     </body>
12 </html>

　　　　　　2）

1 @charset "utf-8";
2 /*css*/
3     h2{
4         text-align: center;background-color: blue;color: green;
5         }
6     p {
7         text-align: center;background-color: red;color: #eeff11; width:300px;height:300px;line-height:300px;
8     }

　　（4）链接式
　　　　<link href="mystyle.css" rel="stylesheet" type="text/css" />

　　例：

 1 <html>
 2     <head>
 3         <title>链接式</title>
 4         <link href="mystyle.css" rel="stylesheet" type="text/css"/>
 5     </head>
 6     <body>
 7         <h2>这是链接式</h2>
 8         <p>链接式的段落！</p>
 9     </body>
10 </html>

　　mystyle.css

1 @charset "utf-8";
2 /*css*/
3 h2{background-color: red;color: blue;text-align: center;}
4 p{background-color: blue;color: red;text-align: center;width: 500px;height: 300px;line-height:300px;}

转载于:https://www.cnblogs.com/kylyww/p/5233616.html

CSS Day04 css核心基础相关推荐

第四章 JavaWeb CSS入门核心基础基础形式 + 选择器
谢罪:今天起晚了= =! 文章目录什么CSS? css样式规则 CSS核心基础行内式也称为内联样式内嵌式链入式导入式选择器标记选择器类选择器 id选择器通配符选择器什么CSS? C ...
HTML，css和JavaScript的基础学习—JavaScript篇
HTML,css和JavaScript的基础学习-JavaScript篇 JavaScript是做什么的? JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型 ...
CSS（简介、基础选择器、字体属性、文本属性、引入方式）
文章目录 1.CSS简介 1.1HTML的局限性 1.2CSS-网页美容师 1.3CSS语法规范 2.CSS基础选择器 2.1选择器的作用 2.2选择器的分类 2.3标签选择器 2.4类选择器 2.5 ...
前端基础知识面经大全（含html/css/js/es6/计算机基础）
目录参考: https://blog.csdn.net/henucm/article/details/105755073 一.HTML 1.对HTML语义化的理解 2.src和href的区别 3.D ...
HTML，css和JavaScript的基础学习—css篇
HTML,css和JavaScript的基础学习-css篇 1.css是什么?由什么组成? 层叠样式表,定制html元素的显示样式,美化页面,对于前端页面的搭建十分重要. 由三部分组成:选择器,属性, ...
HTML，css和JavaScript的基础学习—html篇
关于HTML,CSS,JavaScript的基础学习心得-html 它们之间的联系初接触html html头部 html主体 html文本 html图像与链接它们之间的联系一个基本的网站包含很多 ...
网页开发基础，HTML、CSS技术、JavaScript基础
一.学习目标 1.HTML技术 2.CSS技术 3.JavaScript基础二.重要知识点 1.HTML技术超文本标记语言(英语:HyperText Markup Language,简称:HTML ...
css的box模型_拆箱CSS Box模型的基础
css的box模型 by Bryan Smith 通过布莱恩史密斯拆箱CSS Box模型的基础 (Unboxing the basics of the CSS Box Model) Understa ...
关于文本溢出显示省略号、圣杯双飞翼布局、CSS Hack、PS基础、以及项目的一些规范
溢出显示省略号单行文本溢出显示省略号方法一: .box{width:100px; border:1px solid red; /* 设置内容不换行 */white-space:nowrap;/ ...

CSS Day04 css核心基础

CSS Day04 css核心基础相关推荐

最新文章

热门文章