CSS基础篇
程序员文章站
2022-05-26 22:30:27
...
CSS基础篇
CSS层叠样式表
CSS：内联样式、内部样式、外部样式。优先级依次减小
CSS背景：
background-color ： 背景色
background-image ： 背景图
background-repeat ： 背景排列方式是否平铺及如何平铺
background-attachment ： 背景图与内容的方式，默认scroll背景图随着内容的滑动固定不动，
fixed随着内容的滑动跟着滑动
background-position ： 背景定位，九宫格布局
background-position ： 背景定位，九宫格布局
简单例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#p{
background-color: #5F9EA0;
}
.box{
background-color: aquamarine;
background-image: url(../images/smartphone2.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
height: 1200px;
}
</style>
</head>
<body>
<div id="p">
<p>我的世界</p>
<p>我的世界</p>
<p>我的世界</p>
<p>我的世界</p>
</div>
<div class="box">
<p>我的世界</p>
<p>我的世界</p>
<p>我的世界</p>
<p>我的世界</p>
</div>
</body>
</html>CSS文本：
text-align： 文本的水平对齐方式，值left、right、center、justify
text-decoration ：文本修饰，值none 、 overline（文本上划线）、line-through（文本中间划线）、underline（文本下划线）
text-transform ： 文本的转化，值 uppercase （转为大写） 、lowercase （转为小写）、capitalize（首字母大写）
text-indent ： 文本第一行缩进
letter-spacing ： 字符之间的空间
line-height ： 行与行之间的空间
deriction： 文本的方向，值rtl（右到左），ltr（左到右）
word-spacing ： 单词之间的空间
white-space ： 在元素内禁用文字环绕，不换行
vertical-align ： 图片与文本内容的垂直对齐方式，值text-top、text-bottom、text-middle等
text-shadow ： 文本阴影，
color： 文本颜色
文本字体 : font-family 值字体名
字体样式 ： font-style 值noraml（正常显示）、italic（斜体）、oblique（倾斜的文字）
字体大小 ： font-size 单位px、em、rem em皮面IE无法调整文本的问题。默认 1 em = 16 px
字体粗细 ： font-weight 值normal（正常）、bold（粗）、bolder（更粗）、lighter（更细）、inherit（继承父元素的粗细）、100-900
字体样式 ： font-style 值noraml（正常显示）、italic（斜体）、oblique（倾斜的文字）
字体大小 ： font-size 单位px、em、rem em皮面IE无法调整文本的问题。默认 1 em = 16 px
字体粗细 ： font-weight 值normal（正常）、bold（粗）、bolder（更粗）、lighter（更细）、inherit（继承父元素的粗细）、100-900
简单例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*CSS样式的优先级:内联样式>id选择器>类选择器>元素选择器*/
body{
/*文本居中*/
text-align: center;
background-color: beige;
}
/*元素选择器*/
p{
font-family: "微软雅黑";
font-size: 24px;
/*字符之间的间距*/
letter-spacing: 0.4em;
/*行高*/
line-height: 30px;
/*文本颜色*/
color: #ADD8E6;
}
/*id选择器*/
#p{
/*文本的修饰*/
text-decoration: overline;
/*文本的转换小写*/
text-transform: lowercase;
color: blueviolet;
/*字体的粗细*/
font-weight: 600;
}
/*类选择器*/
.p{
text-decoration: line-through;
/*文本的缩进*/
text-indent: 2em;
color: darkorange;
/*字体的风格样式 */
font-style: oblique;
}
</style>
</head>
<body>
<p>CSS基础</p>
<p id="p">CSS基础</p>
<p class="p">CSS基础</p>
<!--内联样式 text-shadow文本阴影-->
<p style="text-decoration: underline;color: #5F9EA0; text-shadow: 1px 1px brown;">CSS基础</p>
</body>
</html>
CSS链接：
a:link ： 正常，未访问的链接
a:visited ： 用户已经访问过的链接
a:active ： 链接被点击的那一刻
a:hover ： 当鼠标放在链接上时
简单例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<style type="text/css">
/*正常下样式*/
a:link{
/*左填充*/
padding-left: 10px;
font-size: 24px;
display: block;
line-height: 50px;
color: darkgreen;
text-decoration: none;
}
/*鼠标放上去时的样式*/
a:hover{
color: #FF8C00;
text-decoration: underline;
}
/*鼠标点击那一刻的样式*/
a:active{
font-size: 200%;
}
/*已经访问了的样式*/
a:visited{
color: blue;
}
</style>
<body>
<!--超链接的默认样式蓝色字体带下划线-->
<a href="#" style="background-color: forestgreen; color: white; width: 70px;">首页</a>
<a href="#">商城</a>
<a href="#">购物车</a>
<a href="#">个人中心</a>
</body>
</html>
CSS布局-水平&垂直对齐
水平居中可以使用 margin： auto;
文本居中对齐 ： text-align ： center;
CSS有序无序列表标记：
list-style-type ： 标记的类型
list-style-position ： 标记的定位
list-style-image ： 标记引用图片 url("图片的路径")
也可设置list-style时按上依次设置其值
简单例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin:0;
}
/*设置无序列表的样式*/
ul{
/*字体大小*/
font-size: 1.5em;
/*行高*/
line-height: 40px;
/*背景色*/
background-color: cadetblue;
/*去除无序列表标记*/
list-style-type: none;
/*自定义标记图像*/
list-style-image:url(../images/w.png);
/*设置定位方式*/
list-style-position: inside;
}
/*无序列表子项样式*/
ul li{
/*字体颜色*/
color: white;
}
/*有序列表样式*/
ol{
font-size: 1.5em;
line-height: 36px;
/*单词间距*/
word-spacing: 18px;
color: white;
background-color: cadetblue;
list-style-position: inside;
}
/*有序列表子项样式*/
ol li{
display:inline;
}
</style>
<body>
<ol>
<li>手机</li>
<li>电脑</li>
<li>平板</li>
<li>电视</li>
</ol>
<hr/>
<ul>
<li>潮流帽子</li>
<li>时尚眼镜</li>
<li>潮牌上衣</li>
<li>韩版长裤</li>
</ul>
</body>
</html>
CSS边框：
border：边框
border-style：边框样式
值： dotted - 点线边框
dashed - 虚线边框
solid - 实线边框
double - 双线边框
groove - 凹槽边框
ridge - 垄状边框
outset - 外凸边框
inset - 嵌入边框
hiddle - 隐藏边框
border-widht： 边框的宽度
border-color： 边框的颜色
border-bottom： 边框的下边框
border-bottom-width：下边框的宽度
border-bottom-color： 下边框的颜色
border-bottom-style ： 下边框的样式
border-left： 左边框
border-left-width： 下边框的宽度
border-left-color： 下边框的颜色
border-left-style ： 下边框的样式
border-right： 右边框
border-rigth-width： 下边框的宽度
border-right-color： 下边框的颜色
border-right-style ： 下边框的样式
border-top： 上边框
border-top-width： 下边框的宽度
border-top-color： 下边框的颜色
border-top-style ： 下边框的样式
CSS轮廓：
outline：轮廓
outline-color：轮廓颜色
outline-width：轮廓宽
outline-style：轮廓样式
值： dotted - 点线轮廓
dashed - 虚线轮廓
solid - 实线轮廓
double - 双线轮廓
groove - 凹槽轮廓
ridge - 垄状轮廓
outset - 外凸轮廓
CSS外边距：
margin： 外边距
margin-top： 上外边距
margin-left： 左外边距
margin-right： 右外边距
margin-bottom： 下外边距
其单位值可px像素，百分比%、pt、em；auto自动适应结果依赖浏览器
简单例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background-color: #ADD8E6;
}
p{
/*宽*/
width: 280px;
/*高*/
height: 80px;
background-color: #F5F5DC;
/*字体大小*/
font-size: 18px;
line-height: 80px;
/*填充 其 上填充 右填充 下填充 左填充 上填充0，左填充20*/
padding: 0 20px;
/*边框的圆角*/
border-radius: 8px;
/*居中的一种方式*/
margin: auto;
/*上边距*/
margin-top: 30px;
}
.p{
/*边框的三个参数依次是宽,样式，颜色*/
border: 2px dashed #8A2BE2;
}
#p{
border: 2px dotted #006400;
/*右边距*/
margin-right: 50px;
}
.out{
/*轮廓宽*/
outline-width: 2px;
/*轮廓颜色*/
outline-color: #FF8C00;
/*轮廓样式*/
outline-style: groove;
/*左边距*/
margin-left: 30px;
}
.he{
/*轮廓*/
outline-width: 2px;
outline-color: darkblue;
outline-style: inset;
/*边框 黄色 */
border: 2px solid yellow;
/*上边距*/
margin-top: 30px;
}
</style>
</head>
<body>
<p class="p">图灵奖</p>
<p id="p">乔布斯</p>
<p style="border: 2px double #0000FF;">比尔盖茨</p>
<hr color="gray"/>
<p class="out">轮廓</p>
<p class="he">轮廓与边框</p>
</body>
</html>
效果图：
CSS填充：
padding： 填充
padding-top: 上填充
padding-left： 左填充
padding-right： 右填充
padding-bottom： 下填充
其单位值可为像素px、百分比%、pt、em；auto自动适应结果依赖浏览器
CSS宽高：
width：宽
max-width： 最大宽
min-width： 最小宽
height： 高
max-height： 最大高
min-height： 最小高
其值单位可为像素px、百分比%等
CSS显示与可见性：
display：显示
visibility：可见性
隐藏元素两种方式：
1、设置 display：none;
2、设置 visibility：hidden;
display:
块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的
CSS定位：
position：定位
其值： static -- 静态， 即没有定位，该为默认值
relative -- 相对， 相对其正常位置
fixed -- 固定， 即使窗口滚动也不动
absolute -- 绝对， 相对于最近的一定为的父元素
sticky -- 粘性， 基于父元素的高与用户的滚动位置来定位，在目标区域相当于relative，
当超出目标区域滚动时相当于fixed
CSS光标（即鼠标放上去的图标）：
style的属性cursor（光标）
值： auto
crosshair
default
help
move
e-resize
n-resize
ne-resize
nw-resize
s-resize
se-resize
sw-resize
w-resize
text
wait
pointer
progress
简单例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-color: cadetblue;
}
img{
/*固定定位*/
position: fixed;
/*距离左侧的宽度*/
left: 64%;
}
.div{
height: 1200px;
}
p{
position: relative;
width: 280px;
height: 60px;
line-height: 60px;
font-size: 18px;
margin: 15px 30px;
color: white;
background-color: darkseagreen;
border-radius: 8px;
text-indent: 1.2em;
cursor: progress;
}
.p{
/*相对定位*/
position: relative;
left: 150px;
}
p:after{
position: absolute;
top: 50%;
left: -20px;
display: block;
z-index: 1;
border-color: transparent darkseagreen;
border-width: 25px 25px 15px 0;
border-style: solid;
margin-top: -15px;
content: "";
}
.p:after{
/*绝对定位*/
position: absolute;
top: 50%;
left: 280px;
display: block;
z-index: 1;
border-color: transparent darkseagreen;
border-width: 25px 0 15px 25px;
border-style: solid;
margin-top: -15px;
content: "";
}
.content{
width: 488px;
height: 400px;
border: 2px solid white;
margin: auto;
margin-top: 50px;
}
.st{
position: -webkit-sticky;
/*粘性定位*/
position: sticky;
top: 52px;
width:320px ;
height: 60px;
line-height: 60px;
font-size: 18px;
color: white;
/*文本对齐方式*/
text-align: center;
/*边框圆角*/
border-radius: 8px;
background-color: darkseagreen;
/*边框*/
border: 2px solid darkseagreen;
margin: auto;
/*上边距*/
margin-top: 20px;
/*鼠标光标*/
cursor: pointer;
}
</style>
</head>
<body>
<img src="../images/smartphone2.png"/>
<div class="div">
<div class="content">
<p>我想成为大佬，我想去爱尔兰</p>
<p class="p">还是脚踏实地，一步一个脚印</p>
<p>一口吃不成胖子，从基础开始</p>
<p class="p">既然选择了，那就往前奔跑吧</p>
<p>世上无难事只怕有心人</p>
</div>
<div class="st">只要功夫深铁杵磨成针</div>
</div>
</body>
</html>
CSS溢出：
overflow： auto（自动根据内容是否采用滚动条）、scroll（采用滚动条，修剪内容）、
hiddle（隐藏，不显示滚动条，修剪内容）、visible（默认值，不修剪内容）、
inherit（继承父元素的overflow值）
overflow-x：指定如何处理右边/左边边缘的内容溢出元素的内容区域
overflow-y：指定如何处理顶部边/底部边缘的内容溢出元素的内容区域
overflow-y：指定如何处理顶部边/底部边缘的内容溢出元素的内容区域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
width: 400px;
height: 250px;
overflow: scroll;
font-family: "微软雅黑";
font-size: 18px;
color: white;
margin: auto;
}
</style>
</head>
<body style="background-color: #8FBC8F;">
<p>
孩子，生活就是这样。成长就是逼着一个人成长，我多么希望你可以改变。这不是真实的你。
你应该去学会同情，去学会关心。毕竟她是你从小就在一起长大的好朋友啊。你该帮你的朋
友修改设计，甚至一起辞职。你小学去安慰别人，大学毕业你们一起居住在同一个屋檐下，
寒冷冬天吃着同一碗泡面，也不和家里说一说。可你现在怎么就成了这样？孩子，
生活就是这样。你该放放手了。生活在催其他人成长，而你却在促使他人成长过程中迷失了
自我，没有成长反而走上了一条歧路。孩子，我没有办法纠正你，但我尽我的努力让你自己
原路返回。
</p>
</body>
</html>
效果图：
CSS剪裁元素：
clip：rect(上，右，下，左);
CSS叠堆顺序：
z-index ：auot、numder、inherut（继承父元素的z-index）； 值高的堆叠顺序值低的在前面
CSS浮动：
浮动会是元素向左或向右移动，周围的元素也会重新排列
float：浮动 值： right（右浮动） left（左浮动）
清除浮动： clear 值： right、left、both、none、inherit
CSS组合选择器:
后代选择器：div p{}
子类选择器：div>p{}
相邻选择器: div+p{}
后续选择器: div~p{}
CSS伪类：
伪类的语法： select ： pseudo-class{}或select.class ： pseudo-class{}
如-- a:hover 就是伪类 在CSS中a：hover必须置于a：link与a:visited的之后才有效
伪类
checked 选中所有选中的元素
disabled 选择所有禁用的元素
enabled 选择所有启用的元素 例input：enabled{}
empty 选择没有子元素的元素
first-of-type 选择每个该元素的第一个该子元素
in-range 选择元素指定范围的值
not(selecet) 选择出该元素外的元素
nth-child(n) 选择该元素的第n个子元素
only-child 选择仅有一个该子元素的元素
read-only 选择有只读属性的元素属性 <p readonly></p>
read-write 选择没有只读属性的元素属性
optional 选择没有require属性的元素属性
require 选择有require的属性的元素属性
root 选择文档的根元素
target 选择当前活动#new元素（点击URL包含锚） ：target{} <a href="#new"></a> <p id="new"></p>
invalid 选择所有的无效元素
伪元素
first-child 选择第一个子元素
last-child 选择最后一个字元素
first-letter 选择元素的第一个字母
first-line 选择该元素的第一行
before 在该元素前插入内容
long(language)为该元素的lang属性选择一个开始值 p：long(it){} <p long="it"></>
valid 选择所有有效值的属性
checked 选中所有选中的元素
disabled 选择所有禁用的元素
enabled 选择所有启用的元素 例input：enabled{}
empty 选择没有子元素的元素
first-of-type 选择每个该元素的第一个该子元素
in-range 选择元素指定范围的值
not(selecet) 选择出该元素外的元素
nth-child(n) 选择该元素的第n个子元素
only-child 选择仅有一个该子元素的元素
read-only 选择有只读属性的元素属性 <p readonly></p>
read-write 选择没有只读属性的元素属性
optional 选择没有require属性的元素属性
require 选择有require的属性的元素属性
root 选择文档的根元素
target 选择当前活动#new元素（点击URL包含锚） ：target{} <a href="#new"></a> <p id="new"></p>
invalid 选择所有的无效元素
伪元素
first-child 选择第一个子元素
last-child 选择最后一个字元素
first-letter 选择元素的第一个字母
first-line 选择该元素的第一行
before 在该元素前插入内容
long(language)为该元素的lang属性选择一个开始值 p：long(it){} <p long="it"></>
valid 选择所有有效值的属性
after 在该元素后插入内容
focus 选择元素输入后具有焦点 input：focus{}
focus 选择元素输入后具有焦点 input：focus{}
CSS一个简单的导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #8FBC8F;
}
li{
float: left;
}
li a:link, .box{
text-decoration: none;
font-size: 20px;
color: white;
display: inline-block;
padding: 20px 25px;
}
li a:hover,.sereach:hover{
background-color: cadetblue;
}
.sereach{
display: inline-block;
}
.down{
display: none;
background-color: #ADD8E6;
min-width: 120px;
position: absolute;
}
.down a:link{
text-decoration: none;
font-size: 20px;
color: black;
display: block;
padding: 5px 25px;
}
.down a:hover{
background-color: #EFEFEF;
}
.sereach:hover .down{
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">书城</a></li>
<li><a href="#">学堂</a></li>
<div class="sereach">
<a class="box" href="#">个人中心</a>
<div class="down">
<a href="#">我的信息</a>
<a href="#">我的钱包</a>
<a href="#">退出</a>
</div>
</div>
</ul>
</body>
</html>
效果图：
CSS透明：opcaty
CSS属性选择器：[属性名:值]{}
CSS图像拼合技术：将一张长图切成几块
CSS实现提示框：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
background-color: #8FBC8F;
padding: 10px 20px;
font-size: 20px;
border-radius: 8px;
}
.content{
font-size: 18px;
margin-top: 20px;
margin-left: 20px;
display: none;
}
.down{
color: white;
width: 120px;
height: 60px;
line-height: 60px;
background-color: #FF8C00;
border-radius: 10px;
position: absolute;
text-align: center;
}
.content .down:after{
content: "";
position: absolute;
left: 45%;
bottom: 100%;
margin-top: -10px;
border-width: 10px;
border-style: solid;
border-color: transparent transparent #FF8C00 transparent;
z-index: 1;
}
.div:hover .content{
display: block;
}
</style>
</head>
<body>
<div class="div">
<span class="box">世界杯</span>
<div class="content">
<span class="down">Hello World!</span>
</div>
</div>
</body>
</body>
</html>
效果图：
上一篇： css
推荐阅读
-
基础篇PHP运算符总结宝典_PHP教程
-
如何加快web 页面的访问速度_html/css_WEB-ITnose
-
HTML和CSS中判断IE版本并实现相应HTML和CSS
-
页面样式问题，麻烦大家帮帮忙，急~~_html/css_WEB-ITnose
-
从.Net到Java学习第六篇——SpringBoot+mongodb&Thymeleaf&模型验证
-
MySQL基础语句【学习笔记】
-
CSS/块级元素与内联元素的深入理解_html/css_WEB-ITnose
-
随机头像PHP版_php基础
-
有关命名空间问题_html/css_WEB-ITnose
-
Python 与 Office 办公软件专栏目录：从基础到实例，助力你的自动化办公梦