CSS

最新推荐文章于 2024-07-26 08:00:00 发布

爱春天的羊

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量379

点赞数

分类专栏：学习笔记文章标签： css html cascading

本文链接：https://blog.csdn.net/weixin_38674643/article/details/73649445

版权

学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS

css概述

CSS是指层叠样式表（Cascading Style Sheets）
样式定义了如何显示HTML元素
样式通常存储在样式表中
外部样式表通常可以极大提高工作效率
外部样式表通常存储在CSS文件中
多个样式可层叠为一

CSS的使用方式

样式表极大地提高了工作效率

样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。

多重样式将层叠为一个

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

层叠次序

但是当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

浏览器缺省设置
外部样式表（通过link标签，将样式单独存放在css文件中）
```
<link rel="stylesheet" 

href="01.css">
```

内部样式表（位于标签内部）

<head>
<style>
p {
    color: blue;
}
h1 {
    color: green;
}
</style>

</head>

内联样式（在 HTML 元素内部，直接在标签后面加style属性）
```
<h1 style="color: 
red;">Hello,World</h1>
```

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

但在实际的开发中，推荐使用第三种方式，能够很好的实现结构与样式分离。

CSS基础选择器

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。

CSS有三个基础选择器：

html选择器
id选择器
class选择器

html标签选择器

使用html选择器时,直接选择html标签。

h1 {
        color: red;
    }

通过标签名当做选择器来使用
无论标签藏的多深，都可以被选中
选择的是所有的标签，而不是具体某个标签，通常情况下，通过标签选择器设置的是共性的问题

选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

html {color: black;}
h1 {color: blue;}
h2 {color: silver;}

可以将某个样式从一个元素切换到另一个元素。
假设您决定将上面的段落文本（而不是 h1 元素）设置为灰色。只需要把 h1 选择器改为 p：

html {color:black;}
p {color:gray;}
h2 {color:silver;}

id选择器

使用id选择器时，格式为“#id名”。

#h1 {
        color: blue;
    }

id的名字是唯一的
任何的标签都可以具有id属性(id是全局属性)。大小写敏感(#test 和 #TEST 是两个完全不同的id)。

给元素设置id(设置class也可以使用)的时候，可以采用驼峰命名法。驼峰：大驼峰命名法和小驼峰命名法 testHeaderLogImage 和TestHeader

注意在html中命名不能使用下划线，使用中横线。下划线留给后端开发使用。如：test-header ，而不是test_header。

class选择器

使用类选择器时，格式为“.class名”。

.h1 {
        color: green;
    }

class属性名可以重复使用
任何的标签都可以具有class属性(class也是全局属性)
class的值可以有多个
```
<h1 class="test logo h1"></h1>  
```
往往最终呈现在网页中的效果并不是由一个选择器中的css决定的，而是由多个选择器的css层叠形成的

当选择器发生冲突时，谁的精确度最高就听谁的！

CSS综合选择器

后代选择器
交集选择器
并集选择器
子元素选择器
序列选择器
相邻兄弟选择器
普通兄弟选择器

一.后代选择器

div p

<div>

    <span>hello,world</span>

</div>

<style>
    /*span {
        font-size: 100px;
    }*/
    /*选中的是div标签里面的span标签*/
    div span {
        font-size: 100px;
    }
</style>

二.交集选择器

div.d1

<body>
<div class="d1">我是d1</div>
<div class="d2">我是d2</div>
<span class="d1">我是span</span>
<div>
    <span class="d2">我是d2</span>
</div>
</body>

<style>
/*类名为d1的div标签*/
    div.d1 {
        color: red;
    }
/*div标签里面的类名叫做d2的标签*/
    div .d2 {
        color: blue;
    }
</style>

注意div.d1和div .d2之间的区别。前者表示类名为的d1的div标签，后者表示div标签里类名叫做d2的标签。

三.并集选择器

div，p

<body>
<div class="d1">
    Hello,d1
</div>

<p class="p1">
    Hello,p1
</p>
</body>

<style>
    /*.d1,.p1 {
        color: red;
    }*/

    div.d1,p.p1 {
        color: red;
    }
</style>

四.子元素选择器

div>p

<div class="d1">

    <em>我是em我是第二级</em>


    <div class="son">
        <em>我是em，我是第三级</em>
    </div>

</div>

<style>
    /*后代选择器 */
    /*.d1 em {
        font-size: 70px;
    }*/

    /*子元素选择器*/
    .d1>em {
        font-size: 70px;
    }
</style>

注意区分子元素选择器和后代选择器之间的区别,子元素选择器只选择后一级的标签，而后代选择器选择它里面所包含的所有这个名字的标签

五.序列选择器

当ul标签时，我们怎么选择其中的一个li标签里的内容，可以使用序列选择器。其中有first-child和last-child

<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
    <li>li4</li>
</ul>

<style>
/*选中第一个子元素*/
    ul li:first-child {
        color: red;
    }
/*选中最后一个子元素*/
    ul li:last-child {
        color: blue;
    }
</style>

注意只能选择第一个和最后一个，选择中间的应该使用其他的方式

六.相邻兄弟选择器

div+p

<div class="d1">Hello,d1</div>
<p>
    hello,p
</p>

<p>
    lllllll
</p>

d1 + p {
        color: red;
    }

七.普通兄弟选择器

div~p

d1 ~ p {
        color: blue;
    }

注意只可以选择div后面的兄弟，因为网页解析是从上而下的，写在div前面的p不能被选择

CSS中的通配符

通配符*可以选择所有的html元素，但是选择能少用就少用。

div和span标签

div标签与span标签皆没有任何实际的意义。
div表示切割，span表示跨度。

CSS中的层叠与继承

1. 继承

父元素拥有了某个css属性，子元素在不需要任何条件的情况下都会拥有父元素的属性。

子元素并不能够全部继承父元素的css，可以继承的css属性具有以下特点：
color text- line- font- — > 都是跟文字属性相关

这些关于文字样式的，都能够继承；所有关于盒子的、定位的、布局的属性都不能继承。

<style>
    .d1 {
        color: red;
    }
    .d1 span {
        color: blue;
    }
</style>

<body>

<div class="d1">

    <span>Hello,span</span>

</div>

</body>

hello，span最后的颜色为蓝色，原先继承了父类的红色，然后被蓝色覆盖

2. 层叠

层叠是css处理冲突的一种解决方案。需要通过计算权重来解决层叠的问题。

解决层叠问题通过计算权重：

总结：

先看有没有选中目标元素，如果选中，比权重，谁大听谁的。如果权重一样，谁写在后面听谁的
如果没有选中，权重为0.如果所有的选择器权重都为0，就近原则。

!important 能够把权重变为无限大。但是存在缺点：只能够作用在单个属性上。尽量少用。

CSS的行内元素与块级元素

常见的块级元素和行内元素

根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。

div这样的块级元素，就会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；与之相反，像“span”“a”这样的行内元素，则没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。

内联元素（行内元素）内联元素(inline element)

a - 锚点
abbr - 缩写
acronym - 首字
b - 粗体(不推荐)
bdo - bidi override
big - 大字体
br - 换行
cite - 引用
code - 计算机代码(在引用源码的时候需要)
dfn - 定义字段
em - 强调
font - 字体设定(不推荐)
i - 斜体
img - 图片
input - 输入框
kbd - 定义键盘文本
label - 表格标签
q - 短引用
s - 中划线(不推荐)
samp - 定义范例计算机代码
select - 项目选择
small - 小字体文本
span - 常用内联容器，定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线
var - 定义变量

块元素(block element)

address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
div - 常用块级容易，也是css layout的主要标签
dl - 定义列表
fieldset - form控制组
form - 交互表单
h1 - 大标题
h2 - 副标题
h3 - 3级标题
h4 - 4级标题
h5 - 5级标题
h6 - 6级标题
hr - 水平分隔线
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容）
noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）
ol - 排序表单
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表

可变元素

可变元素为根据上下文语境决定该元素为块元素或者内联元素。

applet - Java applet
button - 按钮
del - 删除文本
iframe - inline frame
ins - 插入的文本
map - 图片区块(map)
object - object对象
script - 客户端脚本

爱春天的羊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS

CSScss概述CSS是指层叠样式表（Cascading Style Sheets）样式定义了如何显示HTML元素样式通常存储在样式表中外部样式表通常可以极大提高工作效率外部样式表通常存储在CSS文件中多个样式可层叠为一CSS的使用方式样式表极大地提高了工作效率样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css
复制链接

扫一扫