首页 > 代码库 > CSS的学习使用

CSS的学习使用

2024-09-09 13:55:37   217人阅读

<head>
<meta charset="UTF-8">
<title>CSS常用选择器</title>
<!--HTML注释-->
<style type="text/css">
/*CSS语法必须写在<style>标签中*/
/*CSS注释*/
 
【锁定】
/*命名：body中table后+id="table" 如<table id="table1"
*写法：之前+#table名 如;#tablle1 td
*作用：防止多个table的重名
*/
 
/*【选择器命名规范】
* 1、只能有字母、数字、下划线组成
* 2、开头不能是数字
*/
 
/*【选择器优先级】
* 1、就近原则，近者优先
* 2、当作用于同一层时，可用权重计算
权重划分：标签选择器1
class选择器10
id选择器100
行级样式表style=""1000
例：#first .list li 111
#first .list .list li 121
*/
 
/*【通用选择器】
* 1、写法：*{ }
* 2、作用：选中页面中的所有HTML标签
* 3、优先级：最低
*/
*{
 
}
 
/*【标签选择器】
* 1、写法：HTML标签名{ }
* 2、作用：选中所有对应的HTML标签，并修改其样式
*/
li{
color: red;
font-size: 36px;
}
 
/*【类选择器class选择器】
* 1、写法：.选择器名{ }
* 2、调用：在需要修改样式的HTML标签上，使用class="选择器名"
* 3、优先级：当作用于同一层时，class选择器>标签选择器
*/
.list{
color: blue;
}
 
/*【ID选择器】
* 1、写法：#选择器名{}
* 2、调用：在需要修改样式的HTML标签上，使用id="选择器名"
* 3、优先级：同一层时，id选择器>class选择器
* 4、id选择器是唯一的！同一页面严禁出现同名id！！！
*/
#first{
color: green;
}
 
/*【后代选择器】
* 1、写法：选择器1 选择器2 …… 选择器N{}
* 2、生效规则：选择器N必须是选择器N-1的后代
*
*
* 【子代选择器】
* 1、写法：选择器1>选择器2>……>选择器N{}
* 2、生效规则：选择器N必须是选择器N-1的【直接子代】
* */
div>ul>li{
 
}
 
/*【交集选择器】
* 1、写法：选择器1选择器2……选择器N{}
* 2、生效规则：必须同时满足所有选择器，才会生效
*/
li.list#first{
 
}
 
/*【并集选择器】
* 1、写法：选择器1,选择器2,……选择器N{}
* 2、生效规则：满足任意一个选择器，均可生效
*/
.list,#first{
color: darkslategray;
}
 
</style>
<!--
【三种使用CSS的方式】
1、行内样式表：直接在HTML开始标签中使用style=""的方式引用
特点：将CSS代码与HTML代码完全糅杂在一起，不符合W3C关于内容与表现分离的要求，不利于样式复用
优先级：最高
 
2、内部样式表：在<head></head>中，使用<style type="text/css"></style>方式引用
特点：将CSS代码与HTML代码分离，但是没有彻底分离CSS文件与HTML文件，不利于多页面复用样式
 
3、外部样式表：使用link标签链接CSS文件
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/01css.css" />
特点：实现了CSS与HTML的彻底分离，有利于样式复用几后期维护
-->
</head>
<body>
<div >
<ul>
<li class="list" id="first">这是列表项1</li>
<li>这是列表项2</li>
<li class="list">这是列表项3</li>
<li>这是列表项4</li>
<li class="list">这是列表项5</li>
</ul>
</div>
<ul>
<li class="list" id="first">这是列表项1</li>
<li>这是列表项2</li>
<li class="list">这是列表项3</li>
<li>这是列表项4</li>
<li class="list">这是列表项5</li>
</ul>
 
</body>
 
 
 
 
<head>
<meta charset="UTF-8">
<title></title>
 
.div1{
width: 200px;
height: 200px;
 
/* [颜色常用单位]
* 十六进制：#ffffff
* 颜色名称：red
* RGB颜色:RGB(255,255,255)
* RGBA:第四位数，表示透明度。可选值0~1
*/
/* [CSS常用文本属性]
* 1、字体、字号：
font-weight:字体的粗细，可选属性值：bold加粗 lighter细体 100~900数值(400正常，700 bold)
 
font-size:字体大小 **PX **%（浏览器默认字体大小的百分比，绝大部分默认16px）
 
font-family:字体族，设置字体。
>>>多个字体样式间用逗号分隔，浏览器解析时，会从左往右依次解析，选择可用字体。
>>>一般前面使用具体字体名称，最后一个使用字体族类名称。
（常用字体族名称：衬线体serif 非衬线体sans-serif(常用) 等宽体Monospace）
>>>例如：font-family:Arial, ‘Microsoft Yahei‘, sans-serif;
 
font-style:字体样式,正常(normal) 斜体(italic)
 
* font-variant：small-caps; 将字母转为小型大写字体。
 
(了解)font缩写形式：font-style font-variant font-weight font-size line-height font-family
>>> 使用注意事项 ：
① 顺序必须严格按照上述顺序；
② 多个样式之间用空格分割，而且font-size/line-height 必须作为一对用/分割
③ font-size和font-family必须指定，其他样式不指定将采用默认样式显示；
>>> 例如：font:italic bold 75%/1.8 ‘Microsoft Yahei‘, sans-serif;
斜体 加粗 字号/行高 字体族(微软雅黑，非衬线字体族)
 
2、字体颜色：
color:字体颜色
opacity:透明度,0~1之间的数字。 调整时控件以及子控件均会透明，而使用rgba调整时，只会时本控件透明，
子控件不会发生透明度变化。
 
3、行距、对齐等：
line-height:行高 ① 像素单位 48px ② 不带px 正常行高的倍数 ③百分数 同2
>>> 典型应用，调整控件中文垂直居中的方式：控件的height=控件的line-height
 
text-align:块级元素中文字的水平对齐方式 left center right
 
letter-spacing:字符间距,字与字之间的间距
 
text-decoration:文本修饰 下划线underline、删除线line-through、上划线overline、none
 
overflow:控制超出范围文本的显示方式(auto 根据文字多少自动显示滚动条，scroll始终显示滚动条，
hidden 超出范围文本隐藏) 可以通过overflow-x overflow-y分别设置水平垂直方向
 
text-overflow:设置多余文字的显示方式 clip裁剪掉 ellipsis省略号
>>>【重点】让每行多余文字显示省略号：
① white-space: nowrap; 需设置行末不断行
② overflow: hidden; 设置控件超出范围隐藏
③ text-overflow: ellipsis; 设置多余文本省略号显示
 
white-space: nowrap; 设置行末不断行显示
 
word-break: 浏览器默认在空格处断行，当一个单词长度超出范围时，会不断行显示， break-all 允许在单词内换行。
 
text-shadow:文本阴影，有四个属性值：
①水平阴影距离 必选，数值越大，阴影右移
②垂直阴影距离 必选，数值越大，阴影下移
③阴影模糊距离 可选，数值越大，阴影越模糊。默认为0，不模糊
④阴影颜色 可选，默认为黑色
 
text-indent:首行缩进，可用像素值调整缩进大小
 
* text-stroke: -webkit-text-stroke: 0.2px #008000; 描边的粗细，描边的颜色
 
*/
</head>
 
 
 
 
/* 【CSS常用背景属性】
background
 
text-align: left; line-height: 1.75; font-size: 14px;">
background-image:背景图,background-image: url(图片地址相对路径);背景图和背景色同时存在时，背景图会覆盖背景色
 
background-repeat：背景图重复方式 ，no-repeat不平铺 repeat平铺(默认) repeat-x水平平铺 repeat-y垂直平铺
 
background-size:背景图大小。
【指定宽度高度】
>>> 宽高的写法，第一个属性值为宽度，第二个属性值为高度，可以：①直接写像素 ②写百分比（父容器宽高的百分比）
>>> 当只有一个属性值时，默认为宽度。高度等比缩放。
当有两个属性值时，会按照指定的高度宽度进行压缩/拉伸显示。
【其他属性值】
>>> contain:图片等比缩放，缩放到宽或高的某一边等于父容器的宽高，另一边按照图片大小缩放（可能导致部分空余区域无法覆盖）
>>> cover:图片等比缩放，使背景图像完全覆盖背景区域。(可能导致背景图部分区域无法显示)
 
background-position：位置坐标、偏移量
>>> 指定位置：left/center/right top/center/bottom
当只写一个属性值时，另一个默认居中
>>> 填写坐标：水平位置 垂直位置 (像素或百分比形式)
① 当只写一个属性值时，默认写的为水平方向，则垂直居中
② 当使用像素时：图片的左上角往各个方向移动的实际距离
水平方向：正数右移 负数左移 垂直方法：正数下移 负数上移
(左负有正 上负下正)
③ 当使用百分数时，一般只能是正数。代表去掉图片后，剩余空白距离的分布比例。例如 background-position：30%; 水平方向去掉图片后，剩余区域3:7分
 
*/
.div1{
width: 27px;
height: 27px;
background-image: url(css/icon.gif);
/**/
background-repeat: no-repeat;
/*background-size: 100% 100%;*/
background-position: -165px -27px;
white-space: nowrap;
text-indent: 30px;
line-height: 27px;
}
 
 

 

 

【CSS盒模型】

<style type="text/css">
.div1{
width: 100px;
height: 100px;
 
/* [margin 外边距]
* margin属性值最多有四个：
* ① 写一个值：四个方向的margin均为这个值
* ② 写两个值：上、右两个方向，下默认=上，左默认=右
* ③ 写三个值：上、右、下三个方向，左默认=右
* ④ 写四个值：上、右、下、左 四个方向
* ⑤ 写三个值+auto：控件居右显示
* margin: 50px 30px 20px auto; 距离父容器右侧30px
* ⑥ margin: 0 auto; 设置控件在父容器中，水平居中
*/
 
margin: 0 auto;
 
/* [border 边框]
* border 有三个属性值：宽度width 样式style 颜色color
* 原则上，三个属性都需要手动指定(color不写时，默认为黑色)
*/
border: 10px solid green;
 
/* [padding 内边距]
* 使用方式，同margin①~④
* 注意：使用padding会将整个控件撑大，使用时需注意控件可视区域的实际大小。
*/
padding: 50px;
 
 
/* [border-radius 圆角]
* 1、可以接受8个属性值： X轴(左上、右上、右下、左下)/Y轴
* 例如：border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;
* 2、只写X轴时，Y轴默认等于X轴。只写左上角，默认=右下角。只写右上角，默认=左下角
* 例如：border-radius: 50px 0px ;
* =border-radius: 50px 0px 50px 0px;
* =border-radius: 50px 0px 50px 0px/50px 0px 50px 0px;
*
* 3、只写一个数，默认8个值均相等。
*/
border-radius: 20px 30px/40px 50px;
 
/* [border-image 图片边框]
1、十个属性：
① 图片路径：url()
② 图片切片宽度：4个值，分别代表上、右、下、左，四条切线。通过四条切线切割后，会把图片分成九宫格，四个角分别对应边框的四角(不会进行任何拉伸)，四个边分别对应边框的四边(根据设置进行拉伸/平铺/铺满)。
写的时候，不能带px单位
③ 图片边框的宽度：4个值，分别代表上、右、下、左四条边框
写的时候，必须带px单位
④ 边框背景重复方式：stretch(拉伸)、round(铺满)、repeat(平铺)
 
【铺满和平铺区别】
平铺：会保持原有四条边的宽度，进行平铺。可能导致角落处无法显示完整一个图标；
铺满：会对四条边进行适当的拉伸压缩，确保可以正好显示完全。
2、属性值写法：border-image: ① ②/③px ④;
第②部分可以只写1个、2个、3个，判断方式同margin
 */
 
 
 
/* [box-shadow 盒子阴影]
* 1、六个属性值，空格分割：
* x轴阴影距离：(必选) 可正可负，正——右移 负——左移
* y轴阴影距离：(必选) 可正可负，正——下移 负——上移
* 阴影模糊半径：(可选) 只能为正，默认为0。数值越大，阴影越模糊
* 阴影扩展半径：(可选) 可正可负，默认为0。数值增大，阴影扩大。数值减小，阴影缩小
* 阴影颜色：(可选) 默认为黑色
* 内外阴影：(可选) 可选值：inset(内阴影) 默认为外阴影
*/
box-shadow: 0px 0px 10px 0px blue inset;
 
}
 
input:focus{
box-shadow: 0px 0px 1px 0px cornflowerblue inset;
}
 
</style>
 
 
相对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
 
/* [相对定位 relative]
* 1、使用position: relative; 设置元素为相对定位的元素；
* 2、定位机制：
* ① 相对于自己原来文档流中的位置定位，当不指定top等定位值时，不会改变元素位置；
* ② 相对定位元素，仍会占据原有文档流中的位置，而不会释放。
* 3、使用top、left、bottom、right调整位置。当left和right同时存在，left生效，当top和bottom同时存在，top生效。
*/
position: relative;
/*top: 50px;*/
/*left: 50px;*/
left: 50px;
top: 50px;
z-index: 0;
}
.div2{
width: 100px;
height: 100px;
 
/*position: relative;
bottom: 50px;*/
/*z-index: -10;*/
}
</style>
</head>
 
<body>
 
<div class="div1">
这是第一个div
</div>
 
<div class="div2">
这是第一个div
</div>
 
 
 
</body>
</html>
 
绝对定位 固定定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* [绝对定位 absolute]
* 1、使用position: absolute;设置元素为绝对定位元素。
* 2、定位机制：
* ① 相对于第一个非static的祖先元素(即使用了relative/absolute/fixed定位的祖先元素)进行定位。
* ② 如果所有祖先元素均未定位，则相对于浏览器左上角定位；
* ③ 使用absolute的元素，会从文档流中完全删除，原有空间释放不再占有；
*
* [固定定位 fixed]
* 1、position: fixed; 是一种特殊的绝对定位，父容器无法使用relative锁住
* 2、定位机制：永远相对于浏览器进行定位。
*
* [z-index 属性]
* 1、作用：设置定位元素的Z轴层叠顺序
* 2、使用要求：① 必须是定位元素才能使用。relative/absolute/fixed
* ② 使用z-index需要考虑父容器的约束。
* 如果父容器为z-index:auto，则子容器的z-index可以不受父容器的约束；
* 如果父容器z-index进行了设置，则子容器的层叠将以父容器的z-index为准(在同一父容器的不同子元素，仍可以通过自己的z-index调整层叠关系)。
*
* 3、z-index:auto & z-index:0 的异同：
* ① z-index:auto为默认值，与z-index:0处于同一平面。
* ② z-index:auto,不会约束子元素的z-index层次，而z-index:0，会约束子元素必须与父元素处于同一平面。
*
* 4、z-index相同(处于同一平面的定位元素)的层叠关系：后来者居上
*/
.div1{
width: 100px;
height: 100px;
 
/*margin: 0 auto;*/
position: relative;
top: 100px;
left: 25px;
/* 绝对定位元素水平居中的方式：
1、left: 50%;
2、设置margin-left为-width/2：margin-left: -50px;
*/
z-index: auto;
}
.div1_1{
width: 50px;
height: 50px;
 
position: relative;
top: 0px;
left: 0px;
z-index: 1;
}
.div2{
width: 100px;
height: 100px;
 
position: relative;
/*z-index: -1;*/
}
.div2_1{
width: 50px;
height: 50px;
 
position: relative;
/*z-index: 100;*/
 
}
</style>
</head>
 
<body>
<div class="div1">
<div class="div1_1">
 
</div>
</div>
 
<div class="div2">
<div class="div2_1">
 
</div>
</div>
</body>
</html>
 
 
负边距的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* 【1、实现块级元素在块级元素中水平垂直居中】
* ① 设置子容器为定位元素；
* ② left:50%; margin-left:-width/2;
* top:50%; margin-top:-height/2;
*/
.div1{
width: 100px;
height: 100px;
 
overflow: hidden;
/*position: relative;*/
}
.div2{
width: 50px;
height: 50px;
 
position: relative;
left: 50%;
margin-left: -25px;
 
top: 50%;
margin-top: -25px;
}
 
/* 【2、使用负边距增大元素宽度】
* ① 不指定子容器宽度，指定高度或填充内容；
* ② margin: 0px -50px; 可以是左右两边，均超出父容器50px
*/
.div3{
width: 200px;
height: 50px;
border: 5px dotted #0000FF;
margin: 0 auto;
}
.div4{
 
height: 100%;
margin: 0px -50px 0px -50px;
}
/* 第二部分应用，解决div中多个li间距问题
*/
.div5{
width: 170px;
height: 110px;
 
}
 
.div5 ul{
list-style: none;
/*width: 180px;*/
margin-right: -10px;
padding: 0px;
}
 
.div5 ul li{
width: 50px;
height: 50px;
margin-right: 10px;
margin-bottom: 10px;
 
float: left;
}
 
/* 3、负边距实现双飞翼布局
* ① 由于main部分写在前面，所以可以保证朱布局的优先加载
*/
.main, .sub, .extra {
float: left;
}
.main {
width: 100%;
 
}
.sub {
width: 190px;
 
margin-left: -100%;
}
.extra {
width: 230px;
 
margin-left: -230px;
}
.main-wrap {
margin: 0 230px 0 190px;
}
 
 
</style>
</head>
 
<body>
<div class="div1">
<div class="div2">
 
</div>
</div>
 
<div class="div3">
<div class="div4">
 
</div>
</div>
 
<div class="div5">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
 
 
<div class="container clearfix">
<div class="main">
<div class="main-wrap">
<p>main</p>
</div>
</div>
<div class="sub">
<p>Sub</p>
</div>
<div class="extra">
<p>Extra</p>
</div>
</div>
 
 
 
</body>
</html>
 
 
/*[CSS3 动画的使用]
1、声明一个动画(关键帧)
@keyframes name{
from{}
to{}
}
阶段写法：
① 每个阶段用百分比表示，从0%到100%
② 起止必须设置即0%和100%或者from和to
 
2、在CSS选择器中，使用Animation动画属性，调用声明好的关键帧
【Animation:缩写顺序】
Animation-name 动画名称(@keyframes 名称)
 
Animation-duration 动画持续时间
 
Animtaion-timing-function动画速度曲线 常选ease
 
Animtaion-delay 动画延迟时间
 
Animation-iteration-count 播放次数，默认为1，无限次Infinite
 
Animation-direction 设置对象动画在循环中是否反向运动 （ Alternate 逆向播放）
 
* animation-fill-mode 设置对象动画时间之外的状态（forwards： 停留在动画结束状态 backwards:停留在动画开始状态）
 
>>> 注意animation-name和animation-duration必须设置
>>> animation可以同时设置多个动画 动画之间用,分隔
animation:frame1 .3s,frame2 .5s……
 
*/

CSS的学习使用


联系
我们