CSS3基础学习笔记

最新推荐文章于 2024-07-19 15:50:46 发布

憨憨爱学习zz

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量225

点赞数 1

分类专栏：前端学习文章标签： css3 css 学习

本文链接：https://blog.csdn.net/qq_51808540/article/details/128653673

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS3基础学习笔记

1、CSS的基本概念

CSS（Cascading(关联) Style（样式） Sheet（表））级联样式表，表现HTML或XHTML文件样式的计算机语言。包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。

1.1、CSS的优势

内容与表现分离
网页的表现统一，容易修改

2、CSS的基本语法

2.1、样式

2.1.1、行内样式

style="属性名：属性值"

2.1.2、内部样式

<head>
    <style type="text/css">
        选择器{
            属性名;属性值
        }
    </style>
</head>

2.1.3、外部样式

新建一个style.css文件

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

2.1.4、导入式

<!--
@import url(style.css)
-->

2.2、选择器

2.2.1、基本选择器

优先级：ID>class>标签

2.2.1.1、标签选择器

标签名{

}

2.2.1.2、类选择器

.class类名{

}

2.2.1.3、ID选择器

#ID名{

}

2.2.2、层次选择器

<body>
    <div id="app">
        <p> 
        
        </p>
        <ul>
            <li class="first"></li>
            <li>
                <p>
                
                </p>
            </li>
        </ul>
    </div>
</body>

2.2.2.1、后代选择器

#app p

2.2.2.2、子类选择器

#app>ul>li>p(只匹配子节点)

2.2.2.3、相邻兄弟选择器

.first+li(第二个li)

2.2.2.4、通用兄弟选择器

.first~li(之后全部的li)

2.2.2.5、并集选择器

同时选择ul和ol
ul,ol{

}

空格：后代，>:子类；+：相邻兄弟；~：通用兄弟

2.2.3、结构伪类选择器（一般用于li）

2.2.3.1、first-child

第一个子元素

li:first-child

2.2.3.2、last-child

最后一个子元素

li:last-child

2.2.3.3、nth-child(n)

even:偶数；odd：奇数

nth-child(3):第三个子元素
nth-child(even):偶数子元素

2.2.3.4、first-of-type

与first-child最大的区别就是即使父元素的第一个子元素和想找的不匹配也会继续找下去，直到匹配到相同的；没有就另说

2.2.3.5、last-of-type

2.2.3.6、nth-of-type (even、odd）

2.2.4、属性选择器

2.2.4.1、a[href]

匹配这类标签中有这个属性的标签

2.2.4.2、a[href=“#”]

匹配这类标签中这个属性的属性值为特定值的标签

2.2.4.3、a[href^=“http”]

匹配这类标签这个属性的属性值以这个值开头的标签

2.2.4.4、a[href#=“con”]

匹配这类标签这个属性值以特定值结尾的标签

2.2.4.5、a[href*=" xxx"]

匹配这类标签中这个属性以中的属性值中包含特定值的标签

2.3、样式

2.3.1、字体样式

2.3.1.1、font-family字体类型

宋体、微软雅黑

2.3.1.2、font-size 字体大小

2.3.1.3、font-style 字体风格

normal：默认字体
italic :斜体

2.3.1.4、font-weight 字体粗细

最小100
最大1000
bold：加粗

2.3.1.5、简写

font 属性顺序：样式；粗细；大小；类型

2.3.2、文本样式

2.3.2.1、color 文本颜色

2.3.2.2、text-align 对齐方式

left 左对齐
right 右对齐
center 中对齐

2.3.2.3、text-indent 首行缩进

2.3.2.4、line-height 文本的行高

line-height和height值相同便是垂直居中

2.3.2.5、text-decoration 文本的修饰

overline:上划线
linethrough:中划线
underline：下划线
text-decoration: none 一般用这个去除a标签的下划线

2.3.3、超链接伪类

伪类：冒号;在设置的时候四个可以省略,但是顺序不能改变

2.3.3.1、未点击 a:link

可以设置超链接在未点击时的样式

2.3.3.2、点击访问后：a:visited

可以设置超链接在单击访问后的样式

2.3.3.3、悬停效果：a:hover

不仅仅可以设置超链接的效果

2.3.3.4、点击未释放效果 a:active

2.3.3.5、经过时把光标变成小手：cursor:pointer

2.3.4、list样式

2.3.4.1、list-style列表项的类型

list-style:none常用简写，删除前面的小圆心

2.3.4.1.1、list-style-type

设置每个列表前面的小图标

none :无
disc :空心圆
circle:实心圆
square：实习方块
decimal:数字（这玩意能设置各种奇奇怪怪的）

2.3.4.1.2、list-style-image

用图片替换圆心

list-style-image:url("xxxx");

2.3.4.1.3、list-style-position

列表标志放的位置

outside（默认）：保持标记位于文本的左侧。
inline：列表项目标记放置在文本以内，且环绕文本根据标记对齐。

2.3.5、背景样式

2.3.5.1、background-color(更底层)

背景颜色，建议使用16进制，方便在不同浏览器效果一样
transparent：透明背景
rgba(0,0,0,0.6):半透明，a设置透明度

2.3.5.2、background-image

底层放置图片

background-image:url("xxx")

liner-gradient 渐变

background-image:liner-gradient(position,color1,color2,、、、)
方向  颜色1 颜色2、、、

2.3.5.3、background-repeat

重复方式

repeat：水平加垂直
repeat-x ：水平方向平铺
repeat-y:垂直方向平铺
no-repeat 不平铺

2.3.5.4、background-position

背景定位

background-position:(x,y)
(1)x,y
(2)%
50%:背景居中
(3)x,y关键字;left center right;top buttom;

2.3.4.5、bsckground-size

背景大小

auto :默认，原背景
percentage :百分比缩放
cover:整个背景图片放大填充整个元素
contain:让背景图片保持本身的比例扩大

2.3.6、边框样式

2.3.6.1、border-color

边框颜色

bored-top-color

2.3.6.2、border-width

边框像素（宽度）

2.3.6.3、border-style

dasheed 虚线

solider 实线

2.3.6.4、border简写

1px solid back

span{
    border-top:50px solid red ;
    border-left:50px solid green ;
    border-right:50px solid lavender ;
    border-bottom:60px solid yellow ;
}
dasher:虚线
可以通过border去设置一些形状，比如三角形

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-utMxegGB-1673485776821)(assets/image-20211224133111826.png)]

2.3.6.5、border-radius圆角

2.3.7、box-shadowin

盒子阴影

X Y 半径颜色

2.3.8、transform:translate3d(x,y,z)

2D转3D

2.3.9、img

2.3.9.1、vertical-align

垂直对齐

一般以大的物品做参照物
在display转换成行级块元素时如果各个元素大小不一，会默认以底为参照物，不便于调整位置所以可以设置以顶部为基准对齐
top：顶；bottorm:底；middle:中间

3、盒子模型

盒子的底层顺序：

margin>background-colour>background-img>padding>

content(内容)>border(边框)

盒子大小=border+padding+margin+内容

3.1、外边距属性margin

简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值；top、right、buttom、left
特殊属性值

auto	浏览器计算外边距后居中。
length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%	     以包含元素宽度的百分比指定外边距。
inherit	 规定应该从父元素继承外边距。

margin:0px auto;//实现居中效果，会根据父集的宽度计算
父集需要有固定的宽高