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区域变为绿色，鼠标离开变为蓝色。如下

 

最后思维导图总结：