CSS基础篇之了解CSS和它的基本属性

CSS是什么？

CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表，它主是把网页表现与内容分离的一种样式设计语言。这种语言能优化我们编程，把东西简化和优化写法，而且不同的浏览器有不同的CSS前缀

如果你用的是charome和safari，前缀就是-webkit

如果你用的是firefox，前缀是-moz

如果你用的是IE，前缀是-ms

如果你用的是opera，前缀是-o

CSS能做什么？

CSS简化了以前要使用很多图片和脚本实现的效果，只需几行代码就能搞定。方便了程序员的设计过程，更灵活的页面布局和更快的页面加载速度。可以用一个CSS文件控制多个页面属性，只要修改CSS文件中相应的代码，那么页面的效果也会发生改变。设备上也多方面支持手机、打印机、电视机、游戏机等..总的一个目的来说就是为了实现html标签和属性、属性值分开，把HTML属性、属性值用CSS语言来编程使其更简单方便。

CSS语法构成

Selector { Property : Value; }

↓ ↓ ↓

选择符属性值

选择符就相当于我们HTML的标签。属性和值都差不多，只不过属性与属性值之间用：号隔开结束用；号。

CSS的引入方式

有三种引入方式

1.行内引用在：在标签内进行CSS样式编码，这种方法是不需要写选择器。CSS语言属性style。

<body style=”background-color:#ccccc;”>

<p  style=”font-size:16px;background-color:#ccc;”></p>

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

例1：

<html>
<head>
<title></title>
<style type=”text/css”>
    body{
        background-color:#ff0000;
}
</style>
</head>
<body>
<p>变红</p>
</body>
</html>

例2：

<html>
<head>
<title></title>
<style type=”text/css”>
    h1{
        background-color:#ff0000;
        font-size:30px;
font-family;“微软雅黑；
}
</style>
</head>
<body>
     h1{标题}*100
</body>
</html>

3.外部样式表：外部样式表是CSS应用中最好的一种形式，它将CSS样式代码单独放在一个外部文件中，再由网页进行调用。需要在同一个目录下创建一个xxx.css文件名。在里面编辑。

例1：

CSS文件里面写

h1{
        background-color:#ff0000;
        font-size:30px;
font-family;“微软雅黑；
}

在html文件里面写

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="文件名.css" />
</head>
<body>
         h1{标题}*100
</body>
</html>

例2：

CSS文件里面写

body{
        background-color:#ff0000;
}

HTML里面写

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="文件名.css" />
</head>
<body>
<p>变红</p>
</body>
</html>

上面三中引入方式有分先后级别，三种引用方式里标签越近就优先使用该属性。简称就近原则。行内引用> 页内引用> 页外引用。不推荐行内引用，最好用页外引用。

如果我同时在CSS文件里编辑也在HTML编辑看效果使用哪个

在HTML里面写

<html>
<head>
<title></title>
<style type=”text/css”>
    p{
        background-color:red;
}
</style>
</head>
<body>
<p style=“background-color:green;”>变红</p>
</body>
</html>

在CSS里面写

p{
        background-color:blue;
}

P标签里面有编辑了背景颜色绿色会变成绿色。因为就近原则，把P标签里面的style=“background-color:green;”删除，重新刷新网页你会发现这次背景变回红色了。

把

<style type=”text/css”>

       p{

              ackground-color:red;

}

</style>

删除这段，这次是页外引用这次背景变成蓝色了。一定要记住它们的优先级别。

css 代码注释

/* 开始 */ 结束

/* 公共样式*/

body { margin:0px; padding:0px;}

/*导航样式开始*/

#nav {

……

}

/*导航样式结束*/

1.通配选择符 *

把页面内的所有对象进行选择来指定样式。

 <style type="text/css">
            * {
 
                color: #000;
            }
        </style>

<style type="text/css">
            * {
                font-family: "微软雅黑";
                color: #000;
            }
        </style>

这里设置全部可用此属性的标签的字体样式和颜色。

2.元素选择符

指定单个标签进行指定样式，相同的标签都会受到影响

<style type=”text/css”>
    h1{
        background-color:#ff0000;
        font-size:30px;
font-family;“微软雅黑；
}
</style>

<style type=”text/css”>
    p{
        background-color:#ff0000;
        font-size:30px;
font-family;“微软雅黑；
}
</style>

这里就是设置了p和h1标签里面的背景颜色、字体大小、字体样式。

3.群组选择符

将所要设计相同属性的标签一起进行改变。

<style type="text/css">
            h1,p {
                font-family: "微软雅黑";
                font-size: 30px;
                color: #333;
            }
    </style>

<style type="text/css">
            h1，p，b，big {
                font-family: "微软雅黑";
                font-size: 30px;
                color: #333;
            }
    </style>

可以对指定的标签同时编辑这三种属性记住标签与标签之间间隔用 ,号。

现在开始学CSS基础希望能学好吧。大家也要加油！