两天学会css基础（一）

 

什么是css？css的作用是什么？

CSS 指层叠样式表 (Cascading Style Sheets)主要作用就是给HTML结构添加样式，搭建页面结构，比如设置元素的宽高大小，颜色，位置等等。

学习css之前先了解一下css代码在HTML中的书写位置。

样式名称	存放位置	使用范围	应用
嵌套样式	head中的title下面	当前样式所处的页面	存放当前页面会用到的样式
行内样式	标签中通过style设置样式	只作用于当前标签	很少使用(一般可以临时使用)
外联样式	存放于其他文本中，使用时通过link标签引用	所有的页面都可以引用	存放一些所有页面都会用到的公共样式

css代码书写位置有三种形式：

1，第一种，用style标签包裹。通常放在HTML的head标签里。

<style>

div{width: 100px;height: 100px;border: 10px solid red;margin: 0 auto;}

</style>

2，第二种，嵌套在HTML代码的行内。比如<div style=”color : red ;font-size : 20px”></div>。这种形式现在不常用，现在提倡结构与样式分离的写法。

 3，第三种，写在 .css文件里，通过在HTML加入link标签进行引入。

<link rel="stylesheet" href="css/index.css">

练习的时候可以都尝试一下，实际项目中多数用第三种写法。

在我看来，css基础内容其实就五大部分。

第一部分：盒模型

盒模型顾名思义，可以想象为我们生活中的一个纸盒子或木盒子。

它有三个属性，分别为：margin，padding，border

margin指盒子的外边距；padding指大盒子内边与盒子内容的距离；border就指盒子的边框。不理解的可以看下图：

 

块级元素都可以看做是一个盒子。

既然提到了块级元素，那就顺便说一说HTML元素的三种类型。改属性由css中的display属性控制。

display:block;：块级元素。在浏览器内独占一行，可以设置宽高。代表元素<h1>，<p>，<div>等。

display:Inline-block;：行内块级元素，可以设置宽高，一行可以同时存在多个。代表元素：<img>,<input>。

display:Inline;：行内元素，不可以设置宽高，大小由内容决定。代表元素<a>,<b>,<span>等

但是这三种类型是可以通过display属性设定的。以上举例只是该元素的默认display属性。

 

其实一个网页就是由一个个大小不同的盒子构成的。通过对盒模型的学习，为后面搭建页面结构奠定基础。

第二部分：基础选择器

选择器又是什么？为什么要学习选择器？

个人理解，要对HTML标签结构进行样式修饰，必须先找到要修饰的标签。选择器的作用就是帮助我们选择获取我们要进行样式修饰的HTML标签。

Css中常用的基础选择器有七种，

1，标签选择器

标签选择器的名字就是选择器名。

写法如下：

标签名{

属性1:属性值1;

属性2:属性值2;

属性3:属性值3;

........

}

作用：会将所有的这类标签都加上相同的css属性

2，类选择器

类名是由标签的class属性进行定义的。

写法如下，类名前面需要加上一个点

.类名{

属性1:属性值1;

属性2:属性值2;

属性3:属性值3;

........

}

作用：会选择到页面上所有拥有这个类名的元素

3，id选择器

id名是由标签的id属性进行定义的。

写法如下，id名前面需要加上一个井号。

#id名{

属性1:属性值1;

属性2:属性值2;

属性3:属性值3;

...........

}

作用：元素的id值是唯一的，只能对应于文档中某一个具体的元素。

 将拥有这个id名的唯一元素加上css样式。

补充：

1、id选择器与类选择器的区别

   a、id选择器 相当于人的身份证

     一个id名只能设置给一个元素并且元素只能有一个id

   b、class类选择器  相当于人的名字，会有重名的现象。

多个元素可以设置同样的class 一个元素也能有多个不同的class名

2 、id选择器与类class选择器的命名规则

   2.1、命名的取值规范只能是：0-9，a-z，A-Z，_，-，

   2.2、不能以数字开头

4，并集选择器

作用：将两种类型的元素全部选择出来。

多个选择器用逗号隔开，代码：

选择器1 ，选择器2｛

属性名1：属性值1;

属性名2：属性值2;

.......

｝

5，交集选择器

作用：从两个集合中选择中它们相同部分：

多个选择器紧挨着写，代码：

选择器1选择器2 {
属性名1：属性值1;

属性名2：属性值2;

.......

}

6，后代选择器

作用：选择一个标签中所有后代标签里满足条件的标签。

代码：

 选择器（空格）选择器 选择器 ｛

属性名1：属性值1;

属性名2：属性值2;

.......

｝

7，子代选择器

作用：得到 当前标签中的直接子元素（直接放在标签下面没有经过任何标签的嵌套）

多个选择器用右尖括号连接，代码：

选择器>选择器｛

属性名1：属性值1;

属性名2：属性值2;

.......
｝

 

8通配符

*

作用：用于作用于页面上所有的标签.

代码：

<style>

 * {

属性名1：属性值1;

属性名2：属性值2;

.......

}

</style>

注意：通配符在进行选择的时候，会去遍历页面上所有的标签，并且给这些标签设置对应的属性。

 

更多的css3选择器后续再做补充。

选择器的概念讲完了，我们就可以通过选择器对HTML元素设置样式了。

不同的选择器会有不同的应用场合，只能在练习中慢慢体会了。

选择器的权重

学到了选择器，还不得不说一下权重的问题了。

不同选择器的优先级是不同的，对同一个属性设置不同的值，优先级高的选择器设置的样式会把优先级低的层叠掉。这也就是css的特性之一：层叠性。

同时css还有一个特性称为，继承性。也就是说对某个父元素设置了css属性，其子元素没有进行设置，这时候默认会继承父元素的属性。

优先级：

！important>行内样式>id选择器>类选择器>标签选择器>通配符>浏览器默认样式>继承

！important 的优先级最高，实际用的不是太多，一般会在调试代码时用到。用的时候直接写到要作用的属性值后面。但是请注意：!important属性无法继承。

div {

color: red !important;

}

行内样式优先级其次，在css代码书写位置时已经讲过，就是将css直接以属性的形式写在HTML标签里。

Id选择器，类选择器，标签选择器，通配符，继承这些上面都说过了。

还有一个浏览器默认样式，不同的标签浏览器会有给个默认的样式，比如a标签默认会有一个下划线，颜色是蓝色的等。

• 计算组合选择器的权重
• (0,0,0,0)
• (improtant,id选择器,类选择器,标签选择器)

（0，0，0，0）==》第一个0对应的是important的个数，第二个0对应的是id选择器的个数，第三个0对应的类选择器的个数，第四个0对应的是标签选择器的个数，就是当前选择器的权重。

• 规则
• 1. 先看有没有选中，如果选中了，那么以（id数，类数，标签数）来计权重。谁大听谁的。如果都一样，听后写的为准。
• 2. 如果没有选中，那么权重是0。如果大家都是0，就近原则。

 

注意选择器的工作原理：选择器在查找元素的时候不是从左往右找，而是从右往左找。

 

OK，到这里css的选择器部分算是讲完了，学习完选择器我们就可以对元素进行样式修饰了，如何修饰？请看下面常用样式修饰部分。

第三部分 常用样式修饰

常用样式设置：

1，尺寸大小width，height

对于一个元素，我们可以通过它的宽高width，height来设定它的大小。注意属性值的单位是像素px，也可以用百分比的形式。

如下：div{

width：200px;

height:  100px;

}

div{

width：80%;

height:  100%;

}

 

2， 背景background：

背景相关的属性：

background-image:设置背景图片。写法：background-image:url(图片的路径);//默认情况下图片如果比容器要小，它会平铺。

background-repeat:设置背景是否平铺：

取值：

no-repeat:不平铺

repeat-x：在水平方向上平铺

repeat-y:在垂直方向上平铺

repeat:平铺

background-position:设置背景图片的位置

用法：

background-postion: x y;

注意：x,y可以是具体的数值

x,y又可以是一些英文单词。

x: left 左  center 中 right 右

y: top 上  center 中 bottom下

背景的连写方式：

background: background-color background-image background-repeat background-position;

3， 字体font：

字体样式相关的属性：

font-size: 18px;  字体大小

font-weight: bold或者normal或者100-900的整数;  字体粗细

font-family: "微软雅黑";  字体类型

font-style: normal或者italic;   字体样式

Font的连写方式

Font-size 和font-family 必须写

Font:Font-style font-weight font-size font-family;

 

4， 文本text

text-align：用于设定文字的对齐方式

有三种方式

left： 内容左对齐。

center： 内容居中对齐。

right： 内容右对齐。

text-indent:用于文字缩进。属性值可直接用像素值px表示。

text-decoration: 用于修饰文本none | underline | overline | line-through

none：

指定文字无装饰

underline：

指定文字的装饰是下划线

overline：

指定文字的装饰是上划线

line-through：

指定文字的装饰是贯穿线

line-height：定义行高。

word-spacing： 定义单词间的空白（即字间隔）。

p {

  word-spacing:25px;

  }

5， 颜色color：

有3种定义颜色的形式，

1， 颜色关键字表示法，可直接用英文单词来定义，比如red，blue，green等。

2， 16进制表示法，用#000000到#ffffff区间内的16进制数来表示。

3， 三原色表示法，rgb（r，g，b）,其中r,g,b分别代表红色，绿色，蓝色，取值范围为0到255.

6， 边框border

border有三个属性，宽度，样式，颜色。常用样式分为solid实线，dashed虚线，dotted点线，double双线轮廓

border:1px solid red;这是border的复合写法。也可以分开来写

border-width: 5px;

border-style: dashed;

border-corlor: #ccc;

此外。四个边也可以分别进行修饰，如border-top，border-bottom，border-left，border-right

分别对应上下左右四个边。

7，margin，padding

margin和padding的样式设置基本相同。可以给四个边设置同一个值，也可以对四个方向进行分别设置，如margin-top，padding-left等，数值可以是像素px，也可以是百分比。

值得注意的一点是，margin可以为负值，而padding不可以。

8，列表样式list-style

经常会用到的就是清除列表的默认样式list-style：none；

list-style-image:url(skin/ico.png); 设置列表前面的小图标，

9，超链接样式

链接的四种状态：

• a:link - 普通的、未被访问的链接
• a:visited - 用户已访问的链接
• a:hover - 鼠标指针位于链接的上方
• a:active - 链接被点击的时刻

其他样式的设置可以查阅w3school的css教程。

以上部分只是我在工作中经常用到的最基本的样式设置，肯定不够全面，在这里只是针对入门级的同学。如果想了解更多还请查阅http://www.w3school.com.cn/css/index.asp

 

版权所有，如需转载请注明出处。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有