小高不太行之前端——CSS样式（基础）下
提示：还有一篇延申哦，等等我qaq
提示：
三、重要的修饰对象和属性
（一）图片image
1.基本属性
2.透明度
- 属性的透明度是 opacity， Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。
<head>
<meta charset="utf-8">
<style>
div.background
{
width:500px;
height:250px;
background:url(img/back6.png) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.5;
filter:alpha(opacity=60);
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>这是一个透明度为0.5的透明框
</p>
</div>
</div>
</body>
结果如下：
，
3.图片廊
通过设置若干个<div>标签来显示若干张图片，采取相同的格式添加不同的路径和图片描述
想要呈现相同的style则可以在css统一设置
<div class="img">
<a target="_blank" href="图片路径">
<img src="图片路径" alt="图片文本描述" width="300" height="200">
</a>
<div class="desc">这里添加图片文本描述</div>
</div>
</div>
4.图像拼合
图像拼合美化导航栏，效果绝绝子，用图片或者小图标代替文字去链接是不是瞬间就不枯燥了，我觉得是哈
重要的话说四遍，一定记得加display:block; 详情见上篇display属性二更部分，不要太心疼我找错的过程
<head>
<style>
#nav{
position:relative;}
#nav li{
margin:0;padding:0;list-style:none;position:absolute;top:0;}
#a{
left:0px;width:46px;}
#a{
background:url('路径') 0 0;}
#b{
left:63px;width:43px;}
#b{
background:url('路径') -47px 0;}
#navlist li, #navlist a{
height:44px;display:block;}
//一定记得加display:block;
一定记得加display:block;
一定记得加display:block;
</style>
</head>
<body>
<ul id="nav">
<li id="a"><a href="/"></a></li>
<li id="b"><a href="/css/"></a></li>、
</ul>
</body>
菜菜小高介绍一下这段代码的思路：
核心还是一个列表，导航嘛
但是呢要给每一列加背景图片，赋给这些图片block的属性值，让它们在没有文字的时候也能独立显示。接着设置一下相对定位position让彼此定位，完美！
（二）文本和字体
1.文本text
文本是在做WEB的时候经常要用到的，所以需要熟练掌握
大家对文本阴影感兴趣吗? 考虑二更哦
2.字体font
小高认为字体相比文本可能属性就比较少了
最主要的font-size同样也是通过像素来控制
font-weight控制字体粗细，取值为bolder/bold/normal/lighter,分别对应更粗/粗/正常/更细
写文章真的好耗时间，呜，其他不做过多讲解
（三）背景background
1.颜色color
小高精简一下偷个懒 ，此处对于color做一个统一的介绍，其他用到的地方就不一一赘述了、
CSS中，颜色值通常以以下方式定义:
- 十六进制 - 如："#ff0000"
- RGB - 如：“rgb(红,绿,蓝)” 取值皆在0-255之间
- 颜色名称 - 如：“red” 有十七种官方颜色
3.背景图像
同样，单纯的图片皆有的属性就不啰嗦了，对于背景图像要求还真不少
- background-repeat //当背景图片填不满背景的时候
repeat-x 只有水平位置会重复背景图像
repeat-y 只有垂直位置会重复背景图像
no-repeat background-image不会重复
难道你想让你的背景只有左上角被装饰吗，你的图片不想没有重复的充满容器吗？
咳咳咳，再学一个告诉你啊 - background-attachment //图像的固定
scroll 背景图片随着页面的滚动而滚动，这是默认的。
fixed 背景图片不会随着页面的滚动而滚动。
local 背景图片会随着元素内容的滚动而滚动。
-background- position //背景图像起始位置
表示方式皆由x和y两个变量控制
-
由top/bottom/center/left/right组合
（水平取值为左中右；垂直取值为上中下） -
百分比（X% Y%）
-
像素（Xpx Ypx）
【小高秘籍】来听讲了
background-size:100% 100%; background-attachment: fixed;
对，就是它，you can try
（四）链接及导航栏
1.常规的链接
普通链接
可以给它们加你喜欢的颜色哦
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
链接框
话说链接框你有没有想到图片导航栏呢，我假装你想到了
其实这二者是由异曲同工之妙的，什么妙？display：block； 妙啊
只不过链接框是不过设置了1.内边距padding加上填充2.背景颜色background-color看起来像是一个框框罢了
哈哈哈，一副看 破钱 断(看破前端)的样子，不敢不敢
2.导航栏
使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单
先介绍一波基础
垂直导航栏
<style>
ul {
list-style-type: none; //移除列表前小标志
margin: 0;
padding: 0; //删除边距，（本身列表和左边是有点远的）
/*设置全屏高度或宽度，一般是位于左面的导航条
height:100%
width：100%
*/
}
li a {
display: block; //它它它又来了
width: 66px; //规定的哦
background-color: #999AAA;
}
</style>
垂直导航条
在垂直导航栏的基础上，让鼠标移动到某栏的时候变色，就变成垂直导航条，在各大网站应用还是很普及的
li a:hover {
background-color: #555;
color: white;
}
水平导航栏
内联列表项
给<li>标签添加内联显示，就在水平上展示
li
{
display:inline;
}
浮动列表项
浮动<li>标签，并指定为 <a> 标签的元素宽度
li
{
float:left;
}
ha 主要想讲的就是那个图标导航栏，详见上【图片拼合技术】
（五）表格 表单 下拉列表
1.表格
虽然表格布局不常用，但是对于后台数据，或者是要呈现给用户的表格也是有美观的需求的
其中border和bord-bottom 属性值的第二项style的取值参考【CSS I/盒子模型/bottom】
2.表单
<style>
input[type=text] {
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('img/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
</style>
运行结果如下：
从上述对于搜索框的简单渲染来看，对于表单，CSS是通过input【type=text/button/number/password/……】等等属性选择器，增加背景颜色，边框属性等
对于这一块，更丰富的介绍请点击这里
3.下拉列表
- 当鼠标移动到指定元素上时，会出现下拉菜单
基本思路：
- 建立鼠标要移动到的指定元素
class="a" - 建立隐藏的信息区域
class="b"一定要加上display: none;让它隐藏 - 建立连接
.a:hover .b { display: block; }
- 在1的基础上允许用户选取列表中的某一项
基本思路：
在1.基础上要给隐藏区域的内容加上链接并进行渲染
【注意】此时对于class="a"要定义成button
总结
CSS 2号文呢，主要对象是前端设计经常渲染的一些对象，由共性引入，再对它们的特性进行详细的介绍，和CSS I篇共同构成了CSS的基础
下期预告 CSS延伸
转载：https://blog.csdn.net/m0_46568449/article/details/115536534