h5(html5)+css3前端笔记四

Emmet语法

1.生成标签直接输入标签名按tab键即可比如 div 然后tab键，就可以生成<div></div>
2.如果想要生成多个相同标签加上*就可以了比如 div*3 就可以快速生成3个div
3.如果有父子级关系的标签，可以用 > 比如ul>li就可以了
4.如果有兄弟关系的标签，用 + 就可以了比如div+p
5.如果生成带有类名或者id名字的，直接写.demo或者#twotab 键就可以了
6.如果生成的div类名是有顺序的，可以用自增符号$
7.如果想要在生成的标签内部写内容可以用{}表示

<!--    div 加tab按键-->
    <div></div>
<!--    div*3 加tab按键-->
    <div></div>
    <div></div>
    <div></div>
<!--    ul>li 加tab按键-->
    <ul>
        <li></li>
    </ul>
<!--    div+p 加tab按键-->
    <div></div>
    <p></p>
<!--    p.demo 加tab按键-->
    <p class="demo"></p>
<!--    p#two 加tab按键-->
    <p id="two"></p>
<!--    div.demo$*5 加tab按键-->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>
<!--    我们想生成的标签里面默认显示几个文字    -->
<!--    div{我不喜欢男人}*5 加tab按键-->
    <div>我不喜欢男人</div>
    <div>我不喜欢男人</div>
    <div>我不喜欢男人</div>
    <div>我不喜欢男人</div>
    <div>我不喜欢男人</div>

CSS基本采取简写形式即可
1.比如 w200 按tab 可以生成 width:200px;
2.比如lh26 按tab 可以生成 line-height:26px;

Vscode编辑器可以自动化格式代码

CSS的复合选择器

后代选择器

元素1 元素2 {样式声明}

ol li {
  color: red;
}

ol li a {
  color: pink;
}

.nav li a {
  color: blue;
}

子元素选择器

.nav>a {
  color: red;
}

并集选择器

div,
p,
.pig li {
    color: red;
}

伪类选择器

链接伪类选择器

a:link /* 选择所有未被访问的链接 */
a:visited /* 选择所有已被访问的链接 */
a:hover /*选择鼠标指针位于其上的链接 */
a:active /*选择活动链接(鼠标按下未弹起的链接)*/

***必须遵守LVHA的顺序

a:link {
    color: gray;
    text-decoration: none;
}
a:visited {
    color: orange;
}
a:hover {
    color: red;
}
a:active {
    color: yellow;
}

focus伪类选择器

针对input表单元素

<!--把获得光标的input表单元素选取出来-->
input:focus {
    background-color: pink;
}

复合选择器总结

CSS的元素显示模式

什么是元素显示模式

作用:网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页.
元素显示模式就是元素(标签)以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。
HTML元素一般分为块元素和行内元素两种类型

块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div> 标签是最典型的块元素。
块元素特点：
1比较霸道，自己独占一行
2高度，宽度、外边距以及内边距都可以控制
3宽度默认是容器(父级宽度)的100%
4是一个容器及盒子，里面可以放行内或者块级元素
注意：
1文字类的元素内不能使用块级元素
2<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>
3同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素，有的地方也将行内元素称为内联元素。
行内元素特点：
1相邻行内元素在一行上，一行可以显示多个。
2高、宽直接设置是无效的.
3默认宽度就是它本身内容的宽度
4行内元素只能容纳文本或其他行内元素。
注意
1链接里面不能再放链接
2特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

行内块元素

在行内元素中有几个特殊的标签，它们同时具有块元素和行内元素的特点，有些资料称它们为行内块元素
<img/>、<input />、<td>.

元素显示模式总结

元素显示模式的转换

a {
    width: 150px;
    height: 50px;
    background-color: pink;
    display:block;
<!--把行内元素a转换为块元素-->
}
div {
    width: 150px;
    height: 50px;
    background-color: pink;
    display: inline;
<!--把块元素div转换为行内元素-->
}
span {
    width: 150px;
    height: 30px;
    background-color: skyblue;
    display: inline-block;
<!--把行内元素span转换为行内块元素-->
}

单行文字垂直居中

a {
    width: 230px;
    height: 40px;
    font-size: 14px;
    line-height: 40px;
}

CSS的背景

通过CSS背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

背景颜色

div {
    width: 200px;
    height: 200px;
    <!--background-color: transparent;透明的-->
    background-color: pink;``
}

背景图片

background-image : none | url (url)

背景平铺

background-repeat: repeat | no-repeat | repeat-x | repeat-y

背景图片位置

background-position: center right; 方位名词
background-position: 30px 30px; 精确位置
background-position: 30px center; 混合单位

背景图像固定

background-attachment: scroll | fixed; 随对象内容滚动|固定

背景属性复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性 background中。从而节约代码量当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为 :
background:背景颜色背景图片地址背景平铺背景图像滚动背景图片位置
background: black url(images/bg.jpg) no-repeat fixed center top;

背景颜色半透明

background: rgba(0,0,0,0.3);

背景总结

CSS的三大特性

css层叠性

层叠性原则:

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突，不会层叠

css继承性

CSS中的继承:子标签会继承父标签的某些样式,如文本颜色和字号。简单的理解就是:子承父业。

css优先级

当同一个元素指定多个选择器，就会有优先级的产生

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行

CSS的注释

ctrl按键 + /
/* 注解注释内容 */

posted @ 2023-08-17 14:24 Leo266 阅读(33) 评论(0) 编辑收藏举报

刷新页面返回顶部

Leo266