CSS3学习 4
- CSS 伪类
- 1.链接伪类
- 2.输入框高亮
- 3.:first-child
- 4.:lang
- CSS 伪元素
- 1. ::first-letter
- 2. ::first-line
- 3. ::before
- 4. ::after
- CSS 图片透明度
- CSS 导航栏
- 1.全高的固定侧导航栏
- 2.固定的顶部导航栏
- 3.粘性导航栏
CSS 伪类
“伪”–伪装，用于指定所选元素的“特殊”状态。
1.链接伪类
a:link {color: red;}
a:visited {color: green;}
a:hover {color: hotpink;}
a:active {color: blue;}
2.输入框高亮
input:focus {background-color: yellow;}
:focus 表示获得焦点的元素（像用彩色马克笔标记一样）。当用户点击或轻触一个元素或使用键盘的 Tab 键选择它时，它触发高亮。
3.:first-child
p:first-child {color: blue;} //匹配首个p元素
p i:first-child {color: blue;} //所有p中的首个i元素（蓝色）
p:first-child i {color: blue;} //首个p中的所有i元素
:first-child 表示在一组兄弟元素中的第一个元素。
4.:lang
q:lang(en) {quotes: “~” “~”;}
<p>Some text <q lang="en">A quote in a paragraph</q> Some text.</p>
lang=“en”，表示该句使用英语。“zh-CN”，表示简体中文。
在 HTML中，语言是通过 lang 属性和 meta元素的组合来决定的，也可能是通过协议的信息来确定（例如 HTTP 标头）。‘lang’ 属性的主要作用是帮助浏览器和翻译工具正确识别网页的语言。当浏览器显示一个页面时，它会根据 ‘lang’ 属性的值来选择合适的字体、字符集和其他与语言相关的设置。
引申：quotes CSS 属性用于设置引号的样式。（引号几种： “” ‘’ <> “„ ）
q {quotes: “'” “'”;}
<q>To be or not to be. That's the question!</q>
CSS 伪元素
1. ::first-letter
使用 ::first-letter 伪元素，为所有的p标签里的，第一个字符添加特殊效果：
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
2. ::first-line
为所有的p标签里的，第一个行添加特殊效果：
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
3. ::before
在所有的h1元素前插入图片（不改html,用css插入）。
h1::before {content: url(图片1.gif);}
4. ::after
在所有的h1元素后插入图片。
h1::after {content: url(图片1.gif);}
用:after好像也可以。
CSS 图片透明度
img{opacity:0.4;}
img:hover{opacity:0.1;}
可以在鼠标移动到图片上后将图片的透明度（0.4）改变为（0.1），由不清晰变更加不清晰。
如果对div直接使用opacity，div里面的也会有影响。意思：如果你变隐形人了，不是只有皮肤隐形了，内脏也隐形了。
如果是使用 background: rgba(76, 175, 80, 0.1);那么只有背景颜色变透明，其他的依然很清晰，因为这是指定了只有背景透明。
CSS 导航栏
1.全高的固定侧导航栏
body {margin: 0;} //初始设置
ul {
margin: 0;
padding: 0;
background-color: #f1f1f1;
list-style-type: none; //取消ul初始样式
width: 25%; //左侧边栏占横排的25%
height: 100%; //全页面的高度
position: fixed; //元素会被移出正常文档流，元素的位置在屏幕滚动时不会改变。
overflow: auto; //如果内容溢出，则浏览器提供滚动条。
}
li a {
display: block; //块状可点击（类似按钮）
color: #000; //初始字体颜色，黑
padding: 8px 16px; //内边距，防文字贴边不好看
text-decoration: none; //取消链接的下划线
}
li a:hover:not(.active) { //鼠标悬放时（不包括class="active"元素的样式）
background-color: #555;
color: white;
}
li a.active { //li里面的class="active"元素的样式
background-color: #4CAF50; //背景颜色改变
color: white; //字变白色
}
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
<div style="margin-left:25%;padding:1px 16px;height:1000px;"></div>//这里左边外边距设置25%，是为了防止侧边栏挡住内容
2.固定的顶部导航栏
body {margin:0;}
ul {
margin: 0;
padding: 0;
width: 100%;
list-style-type: none;
background-color: #333;
overflow: hidden; //*溢出隐藏，清除浮动，解决外边距塌陷
position: fixed; //元素的位置在屏幕滚动时不会改变。
top: 0; //始终离top 0px
}
li {
float: left; //列表项都向左浮动，排排坐
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
</div>
*处的 overflow: hidden;因为父级元素（ul）不设置高度时，高度由随内容增加自适应高度。当父级元素内部的子元素(li)全部都设置浮动float(left)之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。由于父级元素没有高度，下面的元素会顶上去，造成页面的塌陷。因此，需要给父级加个overflow:hidden属性，这样父级的高度就随子级容器及子级内容的高度而自适应。 不过我试了一下div里有padding:20px;有没有这个overflow: hidden;并不影响页面效果。
3.粘性导航栏
就是在ul的样式里加入
position: -webkit-sticky; //这一句其实是多写的，为了适应更多游览器的内核
position: sticky;
top: 0;
