接着CSS样式表的学习:
(45条消息) CSS样式表的学习_one day321的博客-CSDN博客
第二部分(续):
透明度opacity
opacity表示透明度,一般为:opacity:1 。这个是默认透明度,也就是不透明。
取值一般为0~1。值越小,透明度越高。
它可以和img:hover 标签一起使用。表示鼠标悬浮时,图片会改变样式。
例如:
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
导航栏:(有意思捏)
导航栏,前面介绍了各种各样的,框架、属性、标签。但,最合适的方式,还是使用<ul>、<li>元素标签。
分为垂直侧边导航栏和水平导航栏:
垂直侧边导航栏:
最重要的是这两个点击链接的颜色变化。 表示在此活动链接时的样式,和为在此活动页面的样式。注意这两个缺一不可。
li a.active {
background-color: #04AA6D;
color: white;
}
li a:hover:not(.active) { //如果缺少:not(.active)这个元素,会导致,当我们悬停在此活动页面时,它的样式也会发生改变。
background-color: #555;
color: white;
}
注意:需要设置position:fixed。这个元素很重要。大概只有侧边栏会用到这个元素。
例子:
ul {
list-style-type: none; //设置样式无列表
margin: 0;
padding: 0; //位置是左上。
width: 25%; //宽度是25%
background-color: #f1f1f1;
position: fixed; //固定此位置,这个多琢磨一下。和position:sticky进行比较。
height: 100%;
overflow: auto;
}
li a {
display: block; 设置标签为块级元素,一个占据一行
color: #000;
padding: 8px 16px;
text-decoration: none; 设置链接无下划线。
}
li a.active {
background-color: #04AA6D;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
水平导航栏:
水平导航栏和上述的区别,就是方式设置方法多了。设置浮点方式:float:left。设置内联方式:display:inline。设置粘性导航:display:sticky。
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: -webkit-sticky; /* Safari */
position: sticky; //设置粘贴性的水平导航栏
top: 0;
}
li {
float: left; //这个是关键,使用浮点式的方法设置水平导航栏。
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<div class="header">
<h2>Scroll Down</h2>
<p>Scroll down to see the sticky effect.</p>
</div>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
扩展示例:
具有下拉列表的导航栏:在这个链接的最后面有一个这样的示例。
下拉列表
.dropdown-content {
display: none;} 这个元素,隐藏了dropdown-content样式。通过下面的浮点式,可以启用这个样式。
.dropdown:hover .dropdown-content { 在伪类的方式下可以重启被隐藏的元素。
display: block;
}
示例:
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute; //这个很重要的,决定了它会单独成为一个样式。
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
图片(小图标)样式、属性选择器
图像精灵:
background: url(img_navsprites.gif) 0 0;
- 定义背景图像及其位置(左0px,顶部0px)
其实就是类似于一个长图片,然后单独提取其中的一部分。在很多app上就是这样的长图片。
例如导航栏的图片:
background:url(" ") -47px -47px;后面一个像素是阴影部分的取值像素
属性选择器:
【attribute】 例如:【a】 这样所有链接的属性样式都发生改变。
【attribute="value"】 例如: a[target="_blank"]
[attribute~="value"] 例如:[title~="flower"] 指定,title里面含有flower的属性。完整单词!
[attribute|="value"] 例如:[class|="top"] 和前面的用法差不多。区别,它后面可以跟“-”。
[attribute^="value"] 例如:[class^="top"] 首部含有top属性。 该值不必是整个单词!
[attribute$="value"] 例如:[class$="test"] 尾部含有test属性。同上。
[attribute*="value"] 只要属性包含此内容,就可以。[class*="te"]
表单、计数器
input[ type=text ]:focus //这是一个焦点按钮,当点击的时候,它的样式发生改变。
resize:none。 设置这个属性,则表单属性,不允许改变大小。(有些浏览器可以拖取大小,设置这个属性,则禁用拖取。)
计数器:
它存在以下属性:
counter-reset
- 创建或重置计数器counter-increment
- 递增计数器值content
- 生成的插入物 内容counter()
或函数 - 添加 元素计数器的值counters()
例如: 这个定义了h2的个数。以h2的个数计数。
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
这个属性最重要的就是嵌套计数器:例如1.1 、1.2、1.3这种样式。需要用到两个计数器。并且后一个计数器里面的content里面的内容,是前一个计数器。
由于时间性问题,我需要修改一下我的学习计划,之前的方式,还是太慢了。因为没有实际应用,我不过是阅览一遍,然后再将这些内容做笔记到这个里面,就好比只是copy一遍。不能这样子下去。建议:只看,有题目训练的知识点。其它知识点,不做笔记,想看可以看。尽量不看。等到真正需求的时候再看。