首页 > 代码库 > css的引入方法

css的引入方法

2024-08-13 02:53:40   220人阅读

1.外部途径：

建立xx.css文件与html文件放在同一目录下

加入  <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/4.css"/>
<!DOCTYPE html><html>  <head>    <meta name="generator"    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />    <meta charset="utf-8" />    <title>CSS样式</title>    <meta name="keywords" content="用css给网页装潢" />    <meta name="description" content="用css给网页装潢" />    <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/4.css"/>  </head>  <body>    <p>段落</p>    <p>段落</p>    <p>段落</p>    <p>段落</p>  </body></html>
p{    font-size:40px;    color:red;}

2.内页样式：直接写到html的头部分

<style type="text/css">        p{        font-size:40px;        color:red;                }</style>
<!DOCTYPE html><html>  <head>    <meta name="generator"    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />    <meta charset="utf-8" />    <title>CSS样式</title>    <meta name="keywords" content="用css给网页装潢" />    <meta name="description" content="用css给网页装潢" />    <style type="text/css">        p{        font-size:40px;        color:red;                }</style>    <!--   <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/4.css"/>-->  </head>  <body>    <p>段落</p>    <p>段落</p>    <p>段落</p>    <p>段落</p>  </body></html>

3.行内样式

<!DOCTYPE html><html>  <head>    <meta name="generator"    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />    <meta charset="utf-8" />    <title>CSS样式</title>    <meta name="keywords" content="用css给网页装潢" />    <meta name="description" content="用css给网页装潢" />  </head>  <body>    <p style=" font-size:40px; color:red;">段落</p>    <p>段落</p>    <p>段落</p>    <p>段落</p>  </body></html>

CSS 基本语法（语法简单的理解就是规则）
1)CSS 规则由两个主要的部分构成：
1、选择器
2、一条或多条声明。
选择器：要给元素装潢加样式（首先得选中需要装潢的元素）
声明：声明由一个属性和一个值组成
属性是您希望设置的样式属性。每个属性有一个值。属性和值被冒号分开，如果
要定义不止一个声明，则需要用分号将每个声明分开，养成良好的习惯，就算一
个声明我们也加上分号。
选择器{属性:值;}
使用空格以及回车让css 更可读！
选择器{
属性:值;
}
2）小试牛刀
选择器有一种最简单的写法直接写上你要选中的元素！
p {
color:red; 该行声明将颜色设置为红色
font-size:30px; 该行声明将字体大小设置为30px
}
查看效果！
3）CSS 加注释
/*注释的内容*/

    <style type="text/css">        p{        font-size:40px;        color:red;                }/*css的注释*/ </style>

 

css的引入方法


联系
我们