您的当前位置:首页正文

CSS3学习笔记

2024-11-11 来源:个人技术集锦



1.CSS概述

CSS的四种导入方式:

样式优先级:就近原则

1.直接在标签内使用style属性;

2.在<head>标签内使用<style></style>包裹;

3.链接式插入:

        新建CSS文件,在HTML文件的head标签中插入<link>标签:

 <link rel:"stylesheet" href="文件路径">

4.导入式(不使用)。

2.选择器

基本选择器(标签,类,id)

优先级:id > class > 标签

1.标签选择器

标签名{

    样式语句;

}

2.类选择器

.类名{
        
    样式语句;

}

3.id选择器

#id名{

    样式语句;

}

层次选择器

1.后代选择器

选择在某个元素层级下的所有元素

标签名  标签名{

    样式语句;

}

2.子类选择器

选择某个元素下一个层级的元素

标签名>标签名{


}

3.相邻兄弟选择器

选择某个元素下侧同级相邻相同元素

元素名 + 元素名{


}

4.通用选择器

选择某个元素下侧同级的所有相同元素

元素名~元素名{

}

结构伪类选择器

伪类:为样式的实现加一些条件

如:鼠标悬停后生效

a:hover{
    color: red;
}

伪类选择器:

元素名  元素名:语句{




}

语句:
    first-child  选择元素的第一个元素
    last-child   选择元素的最后一个元素
    nth-child()    选择一个或多个特定子元(参数为1,2,3....等)
    nth-last-child 选择一个或多个特定子元(参数为1,2,3....等)倒着选
    first-of-type() 选择父元素下的第一个同类元素(1,2,3...)
    

属性选择器

1.

元素名[属性名]{


}  


2.

元素名[属性名=属性值]{


}  

3.选择包含该属性值的元素

元素名[属性名*=属性值]{


}  
4.选择以某值开头的元素

元素名[属性名^=属性值]{

}  
*=  包含
^=  以..开头
$=  以...结尾

3.网页美化

<span>标签:突出重点字

字体样式

font- family 字体

        size 字体大小

        weight 字体粗细

font:字体风格(斜体:oblique,意大利体等)   字体粗细(bolder等) 字体大小   字体样式(楷体等);

文本样式

颜色

        color:blue

        color:#ffffff;

        color:rgb(123,123,123)

        添加透明度:0-1

        color:rgba(0.255.255,0.5)

对齐方式

text-align:left    文本左

                center 文本居中

首行缩进

text-indent:2em   段落首行缩进两个中文字

行高

line-height:500px 一行的高度 

装饰

text-decoration:underline;下划线

                        :through; 中划线

                        :overline;上划线

                        :none;清除下划线

文本图片水平对齐:

vertical-align:middle

阴影:

text-shadow:阴影颜色  x轴偏移  y轴偏移 模糊半径  ;

text-shadow:#ffffff  10px 10px 10px  ;

超链接伪类

悬浮时:

a:hover{

}

激活时(鼠标点击未松时)

a:active{

}

点击后:

a:cisited{
}

列表样式

列表点的样式:

list-style:none;去圆点

             :circle;空心圆

             :decimal;数字

             :square:正方形

背景

background-repeat:repeat-x;水平平铺

                              :repeat-y;竖直平铺

                              :norepeat;不平铺

盒子模型

 

margin:外边距

padding:内边距

border:边框

边框

粗细(px):样式(实线,虚线):颜色:

虚线:dashed

实线:solid

例:

border:1px solid red;

外边距

外边距使元素居中

margin:0  auto;(auto:自动对齐)

浮动

块级元素(独占一行)

<h1 - h6><p><div> <ul>

行内元素(不独占一行)

<span><a><img>

行内元素可以被包含在块元素中

display

     display:block;设为块元素

                :inline-block;设为块元素,但是可以内联在一行

                : inline;行内元素

float

float:left;向左浮动

清浮动clear

clear:right;右侧不允许有浮动元素

        :left;左侧不允许有浮动元素

        :both;两侧不允许有浮动元素

        :none;不允许有浮动元素

父级边框塌陷

解决:

1.增加父级元素高度

2.增加一个空div标签,清除其浮动

3.在父级元素中增加以下属性:

        overflow:hidden;

4.父类中添加伪类:after

父类 :after{

content:'';

display:block;

clear:both;

}        

定位

相对定位

相对于自己原来位置进行偏移,仍然在标准文档流中,保留了原来的位置

position:relative;四个位置,上下左右

left:20px;距离上边20像素

right:20px;距离右边20像素

top:距离上边的像素

bottom: 距离下边

绝对定位

基于XXX定位,不在文档流中,原来的位置不会被保留

1.没有父元素定位,基于浏览器定位

2.假设父级元素存在定位,我们通常相对于父级元素进行偏移

3.在父级元素内移动,无法超出

position:absolute;

 固定定位

position:fixed;

无论如何拖动网页,该元素都相对于屏幕不动

可做导航栏

z-index属性

层级,值为0-无限大,一般不设很大

不透明度:

opacity:不透明度(值0-1,小数)

动画

显示全文