CSS 笔记

来源：互联网发布：二个字网络语言大全编辑：程序博客网时间：2024/06/06 00:00

CSS

1. 三种结合方式

结合方式1: html标签上加上style属性. 属性的值填写Css代码.所有标签都有style属性.

<html>  <head><title>结合方式1.html</title><meta name="keywords" content="keyword1,keyword2,keyword3"><meta name="description" content="this is my page"><meta name="content-type" content="text/html; charset=UTF-8">  </head>  <body><p style="color:red;">This is my HTML page. </p><br>  </body></html>

结合方式2:使用head标签中的style标签.设置页面样式.style中填写css代码

<html>  <head><title>结合方式2.html</title><meta name="keywords" content="keyword1,keyword2,keyword3"><meta name="description" content="this is my page"><meta name="content-type" content="text/html; charset=UTF-8">    <style type="text/css">        p{            color:red;        }    </style>  </head>  <body><p ">This is my HTML page. </p><br>  </body></html>

结合方式3：新建一个css文件，填写css代码，在html文件中添加链接

p.css文件

 p{    color:red; }

html文件

<html>  <head><title>结合方式3.html</title><meta name="keywords" content="keyword1,keyword2,keyword3"><meta name="description" content="this is my page"><meta name="content-type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css" href="p.css">  </head>  <body><p>This is my HTML page. </p><br>  </body></html>

2.选择器

1.标签选择器:    标签名称{           }2.id选择器:    #标签id{    }注意: 使用id时.要保证id的值在页面中是唯一的   3.class选择器:    .class名称{    }4.伪类选择器:    选择标签的某个状态.需要配合其他选择器来使用    l link  未访问过    v visited   访问过    h hover 悬浮    a active    激活,点击    a:link{        color:green;    }

3.属性

字体属性 font    font:oblique small-caps 900 25px 黑体;背景属性 backgtound    background: url("mn.jpg") no-repeat fixed center;

4.盒子模型

    盒子模型的属性    一. 边框系类属性    二. 尺寸属性    三. 边距            *内边距            *外边距    border-color:边框颜色    border-width:边框宽度    border-style:边框样式        border-color: red;        border-width: 1px;        border-style: solid;        margin-left:100px;左外边距        margin-top:100px;        padding-left:100px; 左内边距        padding-top:100px; 上内边距        注意:内边距会延长所在盒子的长或宽

示例代码：

12-块&行标签.html

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><style type="text/css">    div{        border: 1px solid red;    }    #one{        height: 300px;        width: 300px;    }    #two{        height: 100px;        width: 100px;        margin-left:100px;        margin-top:100px;    }</style>  </head>  <body>    <div id="one" >    <div id="two"></div>    </div>  </body></html>

0 0