day06网页布局

最新推荐文章于 2024-05-31 14:59:34 发布

weixin_44795592

最新推荐文章于 2024-05-31 14:59:34 发布

阅读量60

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_44795592/article/details/126998158

版权

day06-网页核心布局

一、选择器的权重

关于CSS代码位置

就近原则:当前你的CSS代码离元素越近优先级越高
内联优先级最高的。内部和外部需要根据引入的位置来决定
前提:在相同的选择器情况下

单个选择器优先级

id > class >元素选择器越精准越高

组合选择器

两种计算方法：

给每一类型的选择器进行权重赋值，让结果加起来比较
根据选择器每个位置，采用位置对比法

加法运算

内联样式权重值为1000
id选择器权重值为100
类选择器(伪类、属性)权重值为10
元素选择器权重为1

在权重计算规则不满足满10进1.

10个类选择器加起来优先级还是比一个id选择器更低

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jlOEC79E-1663846112364)(C:/Users/李佳/AppData/Roaming/Typora/typora-user-images/image-20220921113519523.png)]

每个选择器进行权重值计算用到4个0表达式
(0，0, 0, 0)代表(内联样式个数， id选择器个数, class选择器个数、伪类、属性，元素选择器个数)
每一个位置进行对比，一旦又结果就结束

利用其他的框架，不知道选择器，改变样式解决办法：

选择在需要改变标签位置加样式，在样式后面加！important

.container {
background-color: orange ! important ;
}

通配符

*{
box- sizing :border- box;
}

页面上所有的元素被选中
不建议使用，如果使用缩小范围

.container *{
box- sizing :border- box
}

选择不同的选择器设置相同的样式在选择器之间加，

二、字体样式

文本布局，设置不同的颜色、居中、大小等

1.字体大小：font-size

浏览器默认大小16px，最小支持12px

2.字体系列：微软雅黑 font-family=“”;

3.字体粗细：font-weight

值为100-900 ，不加单位px

4.字体风格 font-style

noraml：正常

italic：斜体

三、自定义字体

我们在开发过程中，如果使用window默认提供字体，可能会出现字体缺失的问题
默认采用浏览器的默认字体。我们看到网页效果就差异
网页在不同电脑上显示效果一致, 将需要字体下载到项目，引入进来使用

自定义引入：

@font-face {
    /* 名字 */
    font-family:LJ ;
    /* 路径  可以写多个：都为同一个个体，只是格式不一样 */
    src: url(""),
    url("");
}

/* css中间引入 */
.item{
font-family: LJ;
}

四、css样式继承

在CSS代码中我们给父容器设置了样式，子元素默认作用上了，默认从父元素继承了这个样式过来

 .wrapper{
            /* 只要块级盒子身上的样式都无法继承 */
            width: 300px;
            height: 300px;
            border: 1px solid red;
            /* 基本上所有的文本样式都能继承 */
            color:red;
            text-align: center;
            line-height: 300px;
            /* 字体相关的样式都能继承 */
            font-size: 18px;
        }

继承的权重几乎为零

可以继承的是：color、text-align、line-height

基本上所有的文本样式都可以继承

总结：