CSS样式表

1,：内联样式表 即写在标签内部

 

solid表示实线，获得效果

 

修改语句加宽高（注意分号隔开）

 

获得效果

 

 

当新设置行高（line-height:""）与外边框同样高的时候

 

 

123出现垂直居中

 

 

以后想让123再出现水平居中则添加text-align：center       （align 属性规定 div 元素中的内容的水平对齐方式）

 

出现效果

 

 

再让整个div居中，则设置边距margin:0px  再设置左右边距自动调整：auto

 

---

 

2：内嵌样式表 （必须写在head标签里，由于程序先读取head标签）style标签

 

注意，type标签能够不写，只写style

 

好比只针对p标签起做用，就直接使用p写样式 ，好比设置背景颜色和文字大小，以下

 

 

此时须要body中添加一个相对应的P标签，以下

 

 

显示以下

 

 

若在body中设置多个P标签，都执行内嵌样式

 

显示以下     

 

 

总结：

 

 

---

 

3：外部样式表 

注意写外部样式表的时候会首先默认写一个星号*

margin间距设为0

padding间距设为0     间距：P标签与P标签之间的距离

好比此时 *号标签等于对于全部标签去除边距和间距

 

 

 

新建一个外部样式表，新建css

 

新建以下

 

而后把*标签与p标签剪切过来

 

注意由于自己是css，因此不须要放置style标签，可直接写样式表

因此保存后，出现效果以下

 

 

在HTML当中引用css样式表，鼠标右键·····以下

 

·············································

 

 

以后出现对应CSS的link语句

 

 

 此时保存刷新，则又出现以前出现过的样式，如图

---

二 选择器

1.标签选择器，就是上面说过的

 

2.class选择器 

class表示类，以点“.”开头，以class引用，可屡次引用

 

 

举例：

好比在css中设置一个.aa标签

 

接下来用class在HTML中的第二个p标签中引用.aa   。以下所示：

 

显示效果：

 

小结：.class选择器在css中以点开头设置标签，以class=“”在HTML的P标签中引用

 

3.ID选择器       以#开头以ID引用，能够屡次引用吗？不能够，注意ID是惟一引用

 

例如在css中写入一个ID标签

 

在html中引用，以下

 

效果以下：

 

不能两个p标签引用同一个ID标签，ID只能引用一次，class能够多个引用

 

4.复合选择器

 

例如P标签和span标签同时执行此样式：

 

 

同时HTML中：0

效果如图：0

 

 

（2）：

 

其中.main表示在class=main所引用的标签内部（即两个尖括号中间的位置），若是有P标签存在，则这个P标签执行如下的样式。后代指被包围的。

 

例如：

 

同时css中以下

 

显示效果

 

其中黄色内容为p标签

 

（3）筛选：

 

此表示：p标签当中class等于sp的 执行如下此样式

 

例如：

 

同时HTML中

 

显示以下

 

注：能够理解为前面的P标签的规则没起做用···p标签只是起到了一个导向性的做用

 

 

 

 

 

二.样式属性★★★★

1.    样式属性之背景与前景

1.背景：

 

2.前景字体：

 

（二）边界和边框

 

border（表格边框、样式等）、margin（表外间距）。padding（内容与单元格间距）。

 

 

 

例如：

 

 

 

显示如图：

 

 

 

 

（三）列表与方块

width、height、（top、bottom、left、right）只有在绝对坐标状况下才有用。

 

 

 

---

 

效仿360浏览器中网站连接样式的写法

 

 

连接的style：

  a:link 超连接被点前状态

  a:visited 超连接点击后状态

  a:hover 悬停在超连接时

  a:active 点击超连接时

  在定义这些状态时，有一个顺序l v h a   必定要按照顺序来

例如：

 

显示如图

 

此时访问事后默认浏览痕迹为紫色，如图

 

而后在css中写入一个link标签，让此连接没有x下划线（text-decoration：none），如图

 

再写visited

 

再写hover（鼠标指在上方时，即鼠标悬浮在上方），此时出现下划线与文字颜色：

 

再写active（行动），即点击时显现的颜色：

 

以后保存刷新后出现360浏览器连接样式效果，不附图

可是以下图中不一样颜色的连接：

 

则须要分类，写法以下

l v h a 中分别加标签“.a1”,以下：

 

 

 

再在HTML中   class="a1"  以下：

 

再回到css中 复制一组lvha改标签为a2  ， 并改变初始颜色   以下：

4

 

在HTML中再引用a2，以下

 

效果以下

 

 

注：其中hover还能够在其余div中使用

例如：

 

 

 

显示效果：鼠标指向时div区域变为绿色，鼠标离开变为蓝色。以下

 

最后思惟导图总结：