2020.11.09-前端第六天学习日记-css

最新推荐文章于 2024-07-10 23:34:24 发布

KingMoon318

最新推荐文章于 2024-07-10 23:34:24 发布

阅读量89

点赞数

文章标签： css

本文链接：https://blog.csdn.net/m0_50971101/article/details/109583543

版权

今天上午首先对上周五的学习内容进行了复习，主要是对选择器的一些补充和css的两大特性。
选择器补充内容：
1.子代选择器，格式为选择器1>选择器2（1是2的父级元素）
IE7开始兼容
2.后代选择器，格式为.div1空格p（前者必须为后者的祖先级元素）
3.交集选择器，格式为选择器1选择器2（只支持类选择器与类选择器或标签选择器与类选择器，标签选择器一定要在类选择器前面）
既要满足选择器1又要满足选择器2
4.并集选择器，格式为选择器1，选择器2
5.伪类选择器，分为静态和动态两种
静态只能用于超链接：
:link 超链接点击前
:visited 超链接访问后
动态可用于所有标签
:hover 鼠标移入
:active 点击标签时
:focus 标签获焦
遵循爱恨原则，顺序不能乱
6.序选择器，格式为:first-child（标签里的第一个元素）:last-child（标签里最后一个元素）
7.下一个兄弟选择器，格式为h2+p，必须为相邻的同级关系
选择器兼容性：大部分为IE7开始兼容，IE7以下不支持连续交集，序选择器为IE8开始兼容
css两大特性：
1.继承
文本样式会被后代继承，盒子、背景、浮动不会被继承
2.层叠
当一个元素被多个选择器选中，要计算权重，决定究竟应用哪个样式
权重计算：
数基础选择器的数量
id选择器>类选择器>标签选择器>继承的样式
行内>内嵌+外链（内嵌和外链遵循就近原则）
当权重一样时，也遵循就近原则
另：class=“p1 p2”,也由就近原则决定，并集选择器要分开计算权重
例：

.p2{color:red;}
	.p1{color:blue}
	<p class="p1 p2"></p>

最后颜色应为蓝色
关键字：
！important将一个属性权重提高到无穷大（继承过来的important权重为0）

下午主要学习了css中文本样式的设置和盒子
行高：line-height可以设置单行文本的垂直居中
（goole字体最小为12px，默认字体大小为16px）
字体：复合属性
font:24px（字体大小）/60px（行高） “宋体”（字体样式）
font-weight:bold（常用的字体加粗）
font-style:italic（斜体，但跟字体样式有关）
oblique（普通斜体）
段落：文本首行缩进两个字符：text-indent:2em;
英文单词间距：word-spacing
中文间距（英文字母间距）：letter-spacing
大小写转换：text-transform:uppercase（大写）/lowercase（小写）
基线：基线为英文书写四线格中的第三条线
所以，有时需要去掉基线的空白，设置为底线对齐
vertical-align:bottom;
部分代码如下：

div{
            width:1000px;
            background-color: pink;
            border: 10px dotted gray;
            padding: 40px;
            margin: 100px auto;
        }
        p{
            text-align: center;
            font-size:16px;
            font-family: "SimSun";
            font-weight: bold;
            font-style: oblique;
            text-indent: 4em;
            text-decoration: underline;
            letter-spacing: 1em;
        }

盒子：
盒子主要分为五个部分：内容宽，内容高，内边距，边框，外边距。
真实高度：内容高+内边距上+内边距下+边框上+边框下
真实宽度：内容宽+内边距左+内边距右+边框左+边框右
margin可为负数
当上下两个div的margin不同时，按margin值大的为准
当上下两个div的margin同为负数时，按绝对值大的为准
当上下两个div的margin为一正一负时，两个值相加
盒子练习：

<style>
    .h1{
        width: 600px;
        height: 600px;
        background-color: #FF6D5D;
        border: 1px dashed white;
    }
    .h2{
        width: 450px;
        height: 450px;
        background-color: #FF6D5D;
        border: 2px dashed white;
        margin: 73px auto;
    }
    .h3{
        width: 400px;
        height: 400px;
        background-color: #FF887C;
        border: 2px solid white;
        margin: 23px auto;
    }
    .h4{
        width: 350px;
        height: 350px;
        background-color: #FFAD4E;
        border: 2px solid white;
        margin: 23px auto;
    }
    .h5{
        width: 300px;
        height: 300px;
        background-color: #E1EC48;
        border: 2px dashed white;
        margin: 23px auto;
    }
    .h6{
        width: 260px;
        height: 260px;
        background-color: #A4C649;
        border: 2px dashed white;
        margin: 18px auto;
    }
    .h7{
        width: 150px;
        height: 150px;
        background-color: #FF887C;
        border: 2px dashed white;
        margin: 53px auto;
    }
</style>
</head>
<body>
    <div class="h1">
    <div class="h2">
    <div class="h3">
    <div class="h4">
    <div class="h5">
    <div class="h6">
    <div class="h7">
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>

效果如下：
盒子练习

KingMoon318

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020.11.09-前端第六天学习日记-css

今天上午首先对上周五的学习内容进行了复习，主要是对选择器的一些补充和css的两大特性。选择器补充内容：1.子代选择器，格式为选择器1>选择器2（1是2的父级元素）IE7开始兼容2.后代选择器，格式为.div1空格p（前者必须为后者的祖先级元素）3.交集选择器，格式为选择器1选择器2（只支持类选择器与类选择器或标签选择器与类选择器，标签选择器一定要在类选择器前面）既要满足选择器1又要满足选择器24.并集选择器，格式为选择器1，选择器25.伪类选择器，分为静态和动态两种静态只能用于超链接
复制链接

扫一扫