CSS样式应用指南-优快云博客

本文链接：https://blog.youkuaiyun.com/DevilDark/article/details/52474411

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>