2022-7-10 第六小组 王岩 学习日记（2nd day）

css-----层级样式表

        首先前端有三个方式可以更改样式：1.行内样式；2.内链样式（嵌入样式）;3.外部样式。

行内样式：

        顾名思义，就是在一行标签里直接添加样式的方法：

我在页面的中间

内链样式：

        在head里填写一个

外部样式：

        基本上所有的更改样式都在外部样式里书写，以便实现css和html分离。

在里进行链接

样式表有四种选择器：

1.标签选择器：声明时单独的标签+{}，网页里所有相应的标签都会有响应：

div{}

2.类选择器：声明时需要一个英文的点+相应标签里class的名字:

.index{}

3.id选择器：声明时需要一个#号+相应标签里的id的名字：

#center{}

4.属性选择器：所有标签里带有这个属性，就会被选中。

[type]{}---------选择带有type属性的标签
[type=text]{}----选择属性基础上type等于text的标签
[type~=t]{}------选择type属性上包含某个单词的所有元素。

5.伪类选择器：

a:link{}-------------默认样式
a:hover{}------------鼠标悬停
a:active{}-----------元素被激活
a:visited{}----------点击过的链接。
li:nth-childe(3){}---选中第3个li的元素，()里可以写方程，例如2n。
:checked-------------选中所有被选中的元素。

多个标签一起修饰：

div,p,span,input{}

对div里的p进行修饰：(所有div里的p都会被选中)

div p{}

选中div里的直接字标签：(只要p上一级是div就会被选中)

div > p{}

紧跟着div的p：

div+p{}

优先级：

        行内>类>标签>id

.a{红色}
.b{蓝色}
class="b a"

最终结果是：颜色是蓝色

如果样式有冲突，跟class里的顺序没有关系，跟声明的样式谁是最后执行有关 ，如果没冲突，两个样式里的都可以实现。

继承性：

        字标签会继承父标签的某些样式，文本颜色，字号，背景颜色。

权重:

        继承的样式权重为最低

        行内样式权重最高

        如果权重相同，看最后执行哪个。

        ！important可以改变优先级为无限大。color: red!important—这么使用。

css常用单位：

        px像素绝对单位；

        em相对单位;参考父级元素。父类字体设置16px，子类字体2em就是32px.

        rem相对单位；根据页面决定，若我们改变浏览器的字号设置，页面的字号也会随之发生变化。大多应用在老人版。

        百分比，相对于父级元素的比例。

字体属性：

        font-size:1px;—–字体大小

        font-family: '楷体';—–字体样式

l        ine-height: 25px;—行高

        font-weight:bold;—–粗细

        text-decoration: none;—–去掉下划线

        font-style: italic;—–字体倾斜

列表：

        list-style-type:lower-greek;—–排序类型

        list-style-position:outside;—–位置

        list-style-image:url();—–图片类型

边框：

        border-style:dotted;—–边框线的样式

        border-width:5px;—–边框线的宽度

        border-color:red;—–边框线的颜色

        简写：：border:solid red 1px;

        border-bottom:1px red double;—-下面的边框的边框线为1px,红色，double

        border-radius:5px;—–半径(css3新出的)

        border-collapse:

        border-spacing:0;

区块属性：

        display:inline;—–行级(宽高没用)

        display:block;—–块级

        display:none;—–无

        display:inline-block;—–行级块（可以设置宽高，其他的不行）

盒子模型：

        margin--外边距，元素距离另一个元素的距离。

        padding--内边距,块元素里面的距离边框的距离。

        border--边框

        box-sizing:border-box;—–设置盒子模型的尺寸计算方式。

定位：

        relative 相对定位

                参照物依旧是已经定位的父级元素。

                占有原有位置。不会上天

        absolute 绝对定位

                当前的文档流可以理解为上天了。

                参照物是已经定位的父级元素。

        static 文档流(默认)

        fixed 浮动

        visibility:hidden/visible—–隐藏/显现

溢出：

        溢出以滚动条形式--scroll

        溢出隐藏。overflow:hidden;

浮动：

        float;

        overflow:hidden;

        浮动的元素会脱离原本的文档流，造成父元素的高度坍塌。

        包围图片和文本的div不占据空间，使用了浮动的元素，后面的紧跟的元素就会错误；

鼠标样式：

        cursor:pointer;//小手。

今日份总结：1.路径问题

                        2.css引入

                        3.css特点

                        4.定位，盒子模型。

小记：no-repeat center;在图片后加上意思为：不重复，居中。

今日练习题：参照以下图片利用html+css制作一个页面。

 代码链接：百度网盘 请输入提取码