前端学习笔记——CSS样式

最新推荐文章于 2024-05-29 10:00:28 发布

大鹅eee

最新推荐文章于 2024-05-29 10:00:28 发布

阅读量952

点赞数

分类专栏：前端文章标签：前端开发 CSS HTML

本文链接：https://blog.csdn.net/weixin_41933147/article/details/100805462

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、CSS基础

1.CSS介绍

CSS指层叠样式表，可以极大提高工作效率。

2.CSS基础语法

selector{
property: value;
}
selector表示属性选择器；property表示属性名；value表示属性值,，属性值大于1个单词时，需要加上引号。
eg. h1 {color:red; font_size:14px;}

3.CSS高级语法

（1）选择器分组：在selector位置同时指定多个选择器，为其添加相同样式。
（2）继承：相当于设置优先级，若为body、h1同时设置样式，并将h1放入body中，则h1显示为h1样式，body中其他元素显示为body样式。

4.CSS派生选择器

通过依据元素在其位置的上下文关系来定义样式
eg.
p标签内CSS
<ul>
<li>li内CSS</li>
</ul>
为strong和li strong同时设置CSS，则“p标签内CSS”显示为strong的CSS，“li内CSS”显示为li strong的CSS。

5.CSSid选择器

id选择器可以为标有id的HTML元素指定特定的样式，以“#”来定义。
经常和派生选择器一起使用

6.CSS类选择器

类选择器以一个“.”定义，也可以用作派生选择器。

7.CSS属性选择器

（1）属性选择器，对带有指定属性的HTML元素设置样式
（2）属性和值选择器

<style type=”text/css”>
<!—此为属性选择器，改变所以带有title属性的元素颜色-->
	[title]{
			color: blue;
			 }					
<!—这是一个属性和值选择器，title=“tel”时改变元素颜色-->
	[title=te]{
				color=red;
				}
</style>

二、CSS样式

1.CSS背景

CSS允许使用纯色或背景图像等作为背景效果
常用属性：
background-attachment：背景图像是否固定或随页面的其余部分滚动
background-color：设置元素的背景颜色
background-image：把图片设置为背景
background-position：设置背景图片的起始位置
background-repeat：设置背景图片是否及如何重复

2.CSS文本

可定义文本外观，改变文本的颜色、字符间距、装饰文本、对文本缩进等。
常用属性：
color（文本颜色）
text-align（对齐方式）
text-indent（首行缩进）
text-shadow：向文本添加阴影，该属性有四个值，分别为：上方距离、左侧距离、清晰度、颜色
word-wrap：规定文本的换行规则

3.CSS字体

定义文本的字体系列、大小、加粗、风格和变形
常用属性：
font-family（设置字体系列）
font-size（设置字体尺寸）
font-style（设置字体风格）

4.CSS链接

（1）CSS链接的四种状态
a:link：普通的、未被访问的链接
a:visited：用户已访问的链接
a:hover：鼠标指针位于链接上方
a:active：链接被点击的时刻
（2）常见链接样式
text-decoration属性大多用于去掉链接中的下划线
background-color设置背景颜色

5.CSS列表

CSS列表允许放置、改变列表标志，获奖图像作为列表项标志
常用属性：
list-style-image（列表项图像）
list-style-position（列表标志位置）
list-style-type（列表类型）

6.CSS表格

CSS表格属性可以帮助我们极大的改善表格的外观
常用属性：
border（表格边框）
border-collapse（折叠边框）
weight、height（表格宽高）
text-align（表格文本对齐）
padding（表格内边距）
background-color（表格颜色）

7.CSS轮廓

主要用来突出元素
常用属性：
outline（设置轮廓属性）
outline-color（设置轮廓颜色）
outline-style（设置轮廓样式）
outline-width（设置轮廓宽度）

三、 CSS定位

1.CSS定位

改变元素在页面上的位置
定位机制：普通流、浮动、绝对布局
属性：positon、top、left、right、clip
positon：static（静态）
relative（相对）
absolute（绝对）
fixed（固定）

2.CSS浮动

float属性：
left（向左浮动）
right（向右浮动）
none（不浮动）
inherit（从父级继承浮动属性）
clear属性：
left、right（去掉元素向左、向右浮动）
both（左右两侧均去掉浮动）
inherit（从父季继承来的clear值）

3.CSS盒子模型

（1）盒子模型内容主要包括：margin、border、padding、content
padding（内边距）：
padding（所有边距）
padding-bottom（底边距）
padding-left（左边距）
padding-right（右边距）
padding-top（上边距）
border（边框）：
border-style（边框样式）
border-top-style、border-left-style、border-right-style、border-bottom-style（单边框样式）
border-width（边框宽度）
border-color（边框颜色）等
（2）外边距合并
外边距合并可以理解为叠加的概念。当两个盒子模型都具有外边距时，二者间距离以外边距的较大值为准

4.CSS常用操作

（1）对其操作
使用margin属性进行水平对齐
eg.居中操作可将margin-left、margin-right均设置为auto
margin: 100px auto;
（前一个设置上下边距，后一个设置左右）
使用position属性进行左右对齐
eg.position: absolute; left: 0px实现靠左
使用float属性进行左右对齐
（2）尺寸操作
height（设置元素高度）
line-height（设置行高）
max-height（设置元素最大高度）
max-width（设置元素最大宽度）
min-width（设置元素最小宽度）
min-height（设置元素最小高度）
width（设置元素宽度）
（3）分类操纵
clear（设置一个元素的侧面是否允许其他的浮动元素）
cursor（规定当指向某元素之上时显示的指针类型）
display（设置是否及如何显示元素）
float（定义元素浮动方向）
position（把元素放置到一个静态的、固定的位置）
visibility（设置元素是否可见或不可见）
（4）导航栏
利用<ul><li>并设置其属性进行设计，
（5）图片操作

四、CSS选择器

1.元素选择器

文档的元素就是最基本的选择器
eg. h1{}、 p{}

2.选择器分组

为多个选择器添加相同样式
eg. h1,h2{}
通配符”*”为所有标签添加相同样式： *{}

3.类选择器

允许以一种独立于文档元素的方式来指定样式：.class{}
结合元素选择器，为某元素中的类设置样式：a.class[]
多类选择器：.class1.class2{} （包含了CSS中设置的.class1 .class2 ,class1.class2三种样式）

4.ID选择器：#id{}

类选择器和ID选择器区别：
ID只能在文档中使用一次，而类可以多次使用
ID选择器不能结合使用
当使用js时，需要用到ID

5.属性选择器： [title]{}（title表示属性名称）

根据具体属性值选择：
除了选择拥有某些的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素
属性和属性值必须完全匹配
根据部分属性值选择[title~=””]{}（包含引号内内容的均可）

6.后代选择器：ancestor son{}（可以隔代选择）

选择作为某元素后代的元素

7.子元素选择器：father>son{}（不可以隔代选择）

与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素

8.相邻兄弟选择器：brother1+brother2{}

可选择紧接在另一个元素后的元素，且二者有相同父元素
改变的是后面元素brother2的样式
eg.<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
设置li+li{}样式后，只有item2、item3样式改变

五、CSS动画效果

1.2D、3D转换

通过CSS3转换，我们能够对元素进行移动、缩放、拉长或拉伸，转换实施元素改变形状、尺寸和位置的一种效果，可以使用2D、3D来转换元素

（1）2D转换方法（通过transform:调用）
translate(x,y)（移动）
rotate(degree)（旋转）
scale(width,height)（缩放）
skew(x-degree,y-degree)（倾斜）
matrix()
在使用浏览器中支持各方法
-webkit-transform: ; /* safari chrome*/
-ms-transform: ; /* IE*/
-o-transform: ; / * opera*/
-moz-transform: ; /* Firefox*/
（2）3D转换方法（通过transform:调用）
rotateX(Xdegree)、rotateY(Ydegree)

2.过渡

元素从一种样式转换成另一种样式，主要包括：动画效果的CSS和动画执行的时间
属性：
transition（设置四个过渡属性）
transition-property（过渡的名称）
transition-duration（过渡效果花费的时间）
transition-timing-function（过渡效果的时间曲线）
transition-delay（过渡效果开始时间）

3.动画

遵循@keyframes规则，规定动画的时长和名称
代码示例：

<!--index页面代码-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画效果</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<body>
   <div>动画效果</div>
</body>
</html>

<!--CSS样式代码-->
div {
    width: 100px;
    height: 100px;
    background-color: brown;
    position: relative;
    animation: anim 5s infinite alternate;
    -webkit-animation: anim 5s infinite alternate;
}

@keyframes anim {
    0%{
        background-color: brown;
        left: 0px;
        top: 0px;
    }
    25%{
        background-color: chocolate;
        left: 200px;
        top:0px;
    }
    50%{
        background-color: coral;
        left: 200px;
        top: 200px;
    }
    75%{
        background-color: burlywood;
        left: 0px;
        top: 200px;
    }
    100%{
        background-color: brown;
        left: 0px;
        top: 0px;
    }
}

4.多列

对文本或区域进行布局
属性：
column-count（列的数量）
column-gap（列的间隔）
column-rule（间隔线及其颜色）

代码示例（CSS瀑布流效果）：

<!--index页面代码-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<body>
   <div class="container">
       <div><img src="图片/image1.jfif"></div>
       <div><img src="图片/image2.jfif"></div>
       <div><img src="图片/image3.jfif"></div>
       <div><img src="图片/image4.jfif"></div>
       <div><img src="图片/image5.jfif"></div>
       <div><img src="图片/image1.jfif"></div>
       <div><img src="图片/image2.jfif"></div>
       <div><img src="图片/image3.jfif"></div>
       <div><img src="图片/image4.jfif"></div>
       <div><img src="图片/image5.jfif"></div>
       <div><img src="图片/image1.jfif"></div>
       <div><img src="图片/image2.jfif"></div>
       <div><img src="图片/image3.jfif"></div>
       <div><img src="图片/image4.jfif"></div>
       <div><img src="图片/image5.jfif"></div>
       <div><img src="图片/image1.jfif"></div>
       <div><img src="图片/image2.jfif"></div>
       <div><img src="图片/image3.jfif"></div>
       <div><img src="图片/image4.jfif"></div>
       <div><img src="图片/image5.jfif"></div>
       <div><img src="图片/image1.jfif"></div>
       <div><img src="图片/image2.jfif"></div>
       <div><img src="图片/image3.jfif"></div>
       <div><img src="图片/image4.jfif"></div>
       <div><img src="图片/image5.jfif"></div>
       <div><img src="图片/image1.jfif"></div>
       <div><img src="图片/image2.jfif"></div>
       <div><img src="图片/image3.jfif"></div>
       <div><img src="图片/image4.jfif"></div>
       <div><img src="图片/image5.jfif"></div>

   </div>
</body>
</html>

<!--CSS样式代码-->
.container{
    column-width: 300px;
    -webkit-column-width: 300px;
    -webkit-column-gap: 5px;
    column-gap: 5px;
}

.container div{
    width: 500px;
    margin: 5px 0;
}

效果图
在这里插入图片描述

大鹅eee

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记——CSS样式

一、CSS基础1.CSS介绍CSS指层叠样式表，可以极大提高工作效率。2.CSS基础语法 selector{ property: value; }selector表示属性选择器；property表示属性名；value表示属性值,，属性值大于1个单词时，需要加上引号。eg. h1 {color:red; font_size:14px;}3.CSS高级语法（1...
复制链接

扫一扫