CSS基础整理

导入CSS样式的方式

  • 行内样式：在标签元素中直接添加style属性

    <h1 style="color: black;"/>

  • 内部样式：在head标签内嵌入style样式

    <style>
    p{
        color: black;
    }
</style>

  • 外部样式：在head标签内声明外部引用，连接到外部.css文件，有两种引用方式分别为链接式和导入式

    <!--链接式-->
<link rel="stylesheet" href="css/style.css">
<!--导入式，css2.1新增-->
<style>
		@import url(css/style.css);
</style>
<!--style.css文件-->
p{
    color: aqua;
}

    元素样式加载优先级遵循覆盖原则：自上向下逐一执行，最后执行的样式即为最后展示的样式

CSS选择器

1.基本选择器

  • 标签选择器：

    标签选择器会匹配当前页面所有该标签，并使得它们的样式均相同。

  • 类选择器：

    通过指定标签内部class属性，使得每个标签都有一个自己的class类，然后直接在对应class类声明样式，格式：.class类名{}。

    <style>
    .class1{
        color: #0000ff;
    }
    .class2{
        color: #adff2f;
    }
</style>
<p class="class1">paragon</p>
<p class="class2">paragon</p>

  • id选择器：

    通过指定标签内部id属性，然后直接在对应id声明样式，格式：#id名称{}。

    <style>
    #id1{
        color: #0000ff;
    }
    #id2{
        color: #adff2f;
    }
</style>
<p id="id1">paragon</p>
<p id="id2">paragon</p>

  • id选择器和class类选择器区别：

    id选择器只可使用一次，全局唯一；class类选择器可以跨标签复用。

  • 基本选择器优先级：

    id选择器 > class类选择器 > 标签选择器

2.层次选择器

  • 后代选择器

    祖先节点的后继所有子节点均继承祖先样式，格式：父类标签名 父类后继标签名{}。

    /*表示body以及其后继所有p标签均使用该样式*/
body p{
  color = #adff2f;
}

  • 子选择器

    父节点的直系子节点样式继承父节点样式，格式：父类标签名>子标签名{}。

    /*表示body的直系p标签使用该样式*/
body>p{
  color: green;
}

  • 相邻兄弟选择器

    同级兄弟节点其直接下方节点的样式继承兄弟节点样式（兄弟节点样式不生效），格式：兄弟节点类属性+下方节点{}。

    .class+p{
		color: aquamarine;
}
<!--只有p3会显示颜色，p4,p2,p1不会显示颜色-->
<p>p1</p>
<p class="class">p2</p>
<p>p3</p>
<p>p4</p>

  • 通用选择器

    同级兄弟节点其所有下方节点的样式均继承兄弟节点样式（兄弟节点样式不生效），格式：兄弟节点类属性~下方节点{}。

    .class~p{
	color: red;
}
<!--p3,p4均会显示颜色，p2,p1不会显示颜色-->
<p>p1</p>
<p class="class">p2</p>
<p>p3</p>
<p>p4</p>

3.结构伪类选择器

结构伪类选择器详解: https://blog.csdn.net/ixygj197875/article/details/79038041

4.属性选择器

通过标签名下指定的属性名选择样式，格式：标签名[属性名="属性值"]{}，其中：

  • =表示严格匹配，严格匹配当前属性值对应的标签元素。
  • *=表示贪婪匹配，匹配当前所有含有该属性的所有标签元素。
  • ^=表示起始匹配，匹配当前开头含有该属性的所有标签元素。
  • $=表示末尾匹配，匹配当前末尾含有该属性的所有标签元素。
<style>
/*p2会显示颜色，p1,p3不会显示颜色*/
p[class="class"]{
	color: red;
}
/*p1,p2会显示颜色，p3不会显示颜色*/
p[class*="class"]{
	color: red;
}
/*a1,a2会显示颜色，a3不会显示颜色*/
a[href^="1d"]{
  color: greenyellow;
}
/*a2会显示颜色，a1,a3不会显示颜色*/
a[href$="com"]{
  color: greenyellow;
}
</style>
<p class="class">p1</p>
<p class="class1">p2</p>
<p >p3</p>

<a href="1d">a1</a>
<a href="1d.com">a2</a>
<a href="3d">a3</a>

美化网页元素

1.字体样式

div{
    font-family: "Kaiti SC";/*字体*/
    font-size: 50px;/*字体大小*/
    font-weight: bold;/*字体粗细*/
}
/*简化写法*/
div{
  font: bold 50px "Kaiti SC";
}

2.文本样式

div{
  	/*color颜色表示方式*/
    color: blue;
    color: #0000ff;
    color: rgb(0,255,255);
  	/*rgba代表在传统rgb上添加a,表示透明度*/
    color: rgba(0%,100%,100%,0.3);
  	/*text-align表示文本对齐方式*/
    text-align: center;
  	/*text-indent表示文本首行缩进字符*/
    text-indent: 2em;
  	/*line-height表示行高，当line-height同当前块height同高度，则可以实现文本上下居中效果*/
    line-height: 100px;
    height: 100px;
  	/*text-decoration表示文本装饰线*/
    text-decoration: underline;/*下滑线*/
    text-decoration: line-through;/*中滑线*/
    text-decoration: overline;/*上滑线*/
}

3.超链接样式

/*点击超链接之后未离开的样式*/
a:active{}
/*悬停在超链接上的样式*/
a:hover{}
/*未点击之前的链接样式*/
a:link{}
/*已点击后的链接样式*/
a:visited{}

4.列表样式

ul li{
  /*无序列表前序样式*/
  list-style: none;/*去除无序列表黑点*/
  list-style: circle;/*无序列表黑点变为空心圆点*/
  list-style: square;/*无序列表黑点变为正方形块*/
  list-style: decimal;/*无序列表黑点变为有序列表*/
}

5.背景样式

div{
  	/*边框样式*/
    border: 1px solid red;
  	/*背景图片*/
    background-image: url("path");
  	/*背景图片填充方式：no-repeat表示不填充,repeat-x表示按x轴填充*/
    background-repeat: no-repeat;
  	/*背景图片填充之后图片定位，x轴右向为正，y轴下向为正*/
    background-position: 100px 60px;
  	/*上述缩写方式*/
    background: url("path") 100px 60px no-repeat;
}

盒子模型

1.什么是盒子模型

盒子模型包含三个要素，分别是：

  • 外边距margin
  • 边框border
  • 内边距padding

2.初始化

*{
  /*margin的初始化：
  	margin赋值顺序为上-右-下-左对称复制模式：
  	margin:0; 表示四个方向边距均为0
  	margin:0 1px; 表示上边距为0，右边距为1px，下边距为0，左边距为1px
  	margin:0 1px 2px; 表示上边距为0，右边距为1px，下边距为2px，左边距为1px
  	margin:0 1px 2px 3px; 表示上边距为0，右边距为1px，下边距为2px，左边距为3px
  */
  margin: 0;
  padding: 0;
  text-decoration: none;
}

CSS定位机制

1.文档流定位

  • 元素分类：
    • block块级元素：独占一行，eg:h1～h6,div,p,ul...
    • inline行内元素：不独占一行，eg:span,img,a,strong...
    • inline-block行块级元素：不单独占用一行，但是可以设置height等block独有的属性。
  • 元素类型转换：display强制转换——用于导航栏设计

2.浮动定位

  • float属性：left,right,none，使得块级元素向左/右/不浮动

  • clear属性：left,right,none，清除块级元素向左/右/两边浮动属性

    clear属性用于盒子模型排列不整齐时可以通过清除浮动特性获得更好的排列效果。

  • 父级边框塌缩问题：

    1. 增加父级元素高度

    2. 父级元素内底部增加div标签清除浮动：

      <div id="father">
	...
	<div class="div"></div>
</div>
.div{
  margin: 0;
  padding: 0;
clear: both;
}

    3. overflow：

      <div id="father">
...
</div>
#father{
  /*overflow属性：当内容溢出盒子边框时调用*/
  /*hidden：隐藏溢出部分
  	scroll：显示滚动条
  	auto：如果有溢出部分显示滚动条
  */
	overflow:hidden;
}

    4. 在父级元素之后添加伪类after：

      #father{
  width: 100px;
  height: 100px;
}
/*效果等同于方法2*/
#father:after{
  content: '';
  display: block;
  clear: both;
}

3.层定位

  • position属性：
    • static：默认值，没有定位关系。
    • fixed：固定定位，相对于浏览器窗口。
    • relative：相对定位，相对于直接父元素，relative脱离正常的文本流，但是其在文本流中的原始位置依然存在。
    • absolute：绝对定位，相对于static以外的第一个父级元素，absolute脱离文本流，而且正常流中的原位置不再存在。
  • 位置属性：left,right,top,bottom：相对于左/右/上/下偏移距离（正值默认反向）
  • z-index属性：图层属性，默认值0，值越大说明优先级越高。

CSS变换

1.2D变换

transform属性：旋转，缩放，移动，拉伸

  • rotate(deg):旋转，正值顺时针旋转，负值逆时针旋转。
  • scale(x,y)：缩放，x表示水平方向缩放的倍数;y表示垂直方向缩放的倍数，范围0-1内表示缩小，>1表示放大。

2.过渡与动画

  • transition：过渡，指元素某个属性从一个值过渡到另一个值

    • transition-property:属性名
    • transition-duration:持续时间
    • transition-timing-function:过渡方法：ease:慢;linear:匀速;ease-in-out:慢快慢
    • transition-delay:延迟时间

  • animation：

  1. 定义动画：@keyframes规则
  2. 调用动画：animation属性：属性名-时间-方法

3.3D变换

  1. 设定3D变换：transform-style:preserve-3d
  2. 设定transform变换属性：rotateX(deg)/rotateY(deg)/rotateZ(deg),旋转变换角度
  3. 设定perspective透视属性：近大远小，单位px

其中1和2组成父容器，3组成舞台，即眼睛到舞台的距离，通过perspective实现3D效果。

posted @ 2020-08-13 17:50  予耄逊于荒  阅读(103)  评论(0)    收藏  举报