CSS总结

1、CSS 语法由三部分构成:选择符、属性和值
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

Selector { Property : Value; }
↓                  ↓                 ↓
选择器         属性              值

选择器:表明 花括号中的属性将应用于哪些HTML元素例如“body” , "p", "div"

属性:例如用于设置背景色的属性"background-color, font-size"等等

值比如说background-color属性的可以是"red(红色),black(黑色 )";font-size的值是"20"

2、HTML文档应用CSS,有三种方法可以选择,行内样式表(style),内部样式表,外部样式

3、行内样式表(style),行内引用是指将CSS样式编码直接写在HTML 标签中的style属性里。(注意这种方式的引入CSS,是不需要写选择器的。)

例子:

<p style="background-color:blue">大家好</p>

<h1 style="font-size:30px; color:#ff0f00;">君临天下</h1>

4、页内引用作为页面中的一个单独部分,由<style></style>标签定位在<head></head>之中。

例子:

(1)

body{
2000px;
height: 1500px;

}
</style>
</head>
<body>
<p>定义页面内容宽度、高度</p>
</body>

(2)

<head>

<title>美女背景</title>
<style type="text/css">
body{
background-image:url(3.jpg);

background-size:100%;
}
</style>
</head>

5、外部样式表,外部样式表是CSS应用中最好的一种形式,它将CSS样式代码单独,放在一个外部文件中,再由网页进行调用。

 在<head>....</head>建立个链接,如下

<link rel="stylesheet" type="text/css" href="style.css/">

例子:

(1)HTML中代码

<body>
<p>数风流人物还看今朝</p>
</body>

CSS中代码

body{

background:blue ;

}
P{
font-size: 40;
color: red;
}

(2)HTML中代码

<head>

<title>美女背景</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<p>数风流人物还看今朝</p>
</body>

(2)CSS中代码

body{
height: 1500px;

}
p{
margin-top: 100px;
margin-left: 200px;
}

6、三种引入方式的优先级对比,优先级依次是:就近原则

行内引用> 页内引用> 页外引用

7、css 代码注释,以 /* 开始 */ 结束

8、CSS的选择符可以分成:

  通配选择符

  元素选择符

  群组选择符

  关系选择符

  id 及 class 选择符

  伪类选择符(部分扩展学习)

  属性选择符(扩展学习)

  伪对象选择符(扩展学习)

9、* 号表示所有的对象,所谓通配选择符,就是指可以使用模糊指定的方式来对对象进行选择,指定样式。

例:页内式

       <style>

* {

 color:blue;

 margin:0;

 padding:0;

}

      </style>

例:外部样表,CSS中代码

  *{

    font-size:20px;

           color:black;

        }

10、元素选择,所谓元素选择符,指以网页中已有的标签名作为名称的选择符。

例:

body {}

h1 {}

p {}

11、群组选择符,除了可以对单个标签进行样式指定外,还可以对一组标签进行相同的样式定义。

例:

h1,h2, h3, p ,div{

  font-size:12px;

  font-family:arial;

}

使用逗号对选择符进行分隔。对页面中需要使用相同样式的地方,只需写一次样式。

 

原文地址:https://www.cnblogs.com/moyingliang/p/5752039.html