HTML 和 CSS笔记5

最新推荐文章于 2024-03-03 18:04:00 发布

Richadox

最新推荐文章于 2024-03-03 18:04:00 发布

阅读量348

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html入门文章标签： html css

本文链接：https://blog.youkuaiyun.com/weixin_38185146/article/details/80231354

html入门专栏收录该内容

4 篇文章

订阅专栏

本文介绍HTML和CSS的基本使用方法，包括如何添加CSS样式、样式覆盖原则、样式链接方式及CSS继承特性。此外，还详细讲解了类的选择器基础使用与扩展技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML 和 CSS笔记5

HTML 和 CSS笔记5

添加css样式

head 元素中可以使用

p{
    background-color:red;
}

h1,h2{
    font-family: sans-serif;
    color:  gray;
    border-bottom:1px solid black;
}

这样，所有p标签的背景都被设定成red

块前的元素选择器可以是多个，块内也可包含多个css样式

对标题而言多级标题是不同的元素，所以需要分开写成多个元素选择器

基本css样式

background-color;red; 将背景设为红色

border-bottom: 1px solid gray; 设定元素内的文字下有1像素、实线、灰色的下划线

font-family 设定元素内文字的字体

font-weight 设定文本粗细，可用来设置粗体

left 设定一个元素左边所在位置

line-height 设置行间距

background-color 设定背景颜色

top 设定元素顶部的位置

text-align 将文本左对齐或者右对齐

font-style 设定斜体文本

list-style 改变列表列表项的外观

background-image 允许给元素设个背景图片

border 加边框

padding 设定内边距

font-size 文本字号

css样式覆盖

当几个元素之间有相同的元素，可以在一起设定样式，但除了设定公共的样式，还需要针对独有的样式进行设定


h1,h2{
    font-family: sans-serif;
    border-bottom:1px solid black;
}
h1{
    color:maroon;
}

这样，h1除了具有和h2相同的那部分样式，还具有一个茶色(maroon)的样式

样式链接

往往主页的几个子页都应该具有一部分相同的样式，但是在各自的网页设定相同的样式，不仅代码重复很多，而且修改的时候很麻烦。所以，可以将各个网页公有的css样式放在xx.css文件中(层叠样式表)，这样就实现了各个网页间的样式公用。

/*index.css*/
body {
    font-family: sans-serif;
}

h1, h2 {    
    color: gray;
}

h1 { 
    border-bottom: 1px solid black;
}

p {
    color: maroon;
}

p.greentea {
    color: green;
}
上面是一个层叠样式表，会将引用这个样式表的网页设定成如上样式






    <link type="text/css" rel="stylesheet" href="index.css">
    这串代码用在需要设定样式表的样式的网页中，同样实在<head>元素内。如果不需要使用其他样式，那么不再需要<style>元素
    这串代码中 type表示链接的文件是一个层叠样式表 rel表示链接的文件和html文件的关系，这里用stylesheet表示层叠样式表的链接，href则是层叠样式表的目录（相对和绝对目录都可）

css继承

元素的继承

像body元素下有p元素，p元素下可以有em、a元素等。这可以看成是一种继承关系。

在css样式上，同样可以继承，在没有特殊说明的情况下，子元素是会保持和父标签一样的样式。

body {
    font-family: sans-serif;
}
给body设定了元素的样式，那么body下所有元素，只要没有设定自己的字体样式，那么都会使用body的这个样式，当然img除外，因为img是个void元素，没有文字。

继承的覆盖

当然一味使用父元素的样式不一定很好，css内可以覆盖父元素的样式，只要子元素设定了相应的样式，就会覆盖父元素的相应样式（即子元素会应用特定的样式，如果特定的样式存在的话，特定的样式指针对该元素的样式)

类

类的基础使用

同一个元素，可能在不同的应用场景会有不同的样式。比如p元素，在页面头部是蓝色的，在页面尾部是红色的，这时候仅仅用之前的内容很难实现，就需要类。

p {
    color: maroon;
}

p.greentea {
    color: green;
}
p.raspberry{
    color: red;
}
p.blueberry{
    color:blue;
}

greenrea就是p的一个class属性，可以通过这个属性，给p设定不同的样式

 <p class="greentea">

p有个类是greentea,在p的标签内设定类为greentea，那么这个p元素就会应用上面的样式，即颜色设为绿色。

其他类也一样。类的样式也是可以覆盖的，如果没有给class赋值，就会直接使用p的样式，不会调用任何类的样式

类的扩展

一个类的样式，可能不同的样式都用得到，比如上述的greentea样式，可能h1也有个类似的样式，但是，这样每个元素都写很多类太过麻烦，可以在写类的时候省略元素名

.greentea {
    color: green;
}

这样，其他元素也都可以使用greentea这个类的样式了。

现在开始的类已经不仅仅是某个元素的样式分类，而是扩展到整个html中的样式类型 ，用一个class可以包含多个样式，可以应用于不同的元素。

另外元素可以加入多个类，只需要各个类名用一个空格隔开

.greentea {
    color: green;
}

p.greentea {
    color: green;
}
p.raspberry{
    color: red;
}
p.blueberry{
    color:blue;
}

如果一个元素应用了多个类，但是这些类都有相同的样式（如颜色），具体用什么颜色需要根据哪个类更特定而来，.greentea就没有p.greentea特定，所以就用p.greentea的样式。但是后三个类的特定程度相同，所以浏览器会使用最后一个样式，也就是blueberry的样式。