CSS3学习（4）

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:“~”“~”;}

Some text A quote in a paragraph Some text.

lang=“en”，表示该句使用英语。“zh-CN”，表示简体中文。
在 HTML 中，语言是通过 lang 属性和 meta 元素的组合来决定的，也可能是通过协议的信息来确定（例如 HTTP 标头）。‘lang’属性的主要作用是帮助浏览器和翻译工具正确识别网页的语言。当浏览器显示一个页面时，它会根据‘lang’属性的值来选择合适的字体、字符集和其他与语言相关的设置。

引申：quotes CSS 属性用于设置引号的样式。（引号几种：“”‘’“„）
q {quotes:“’”“’”;}
To be or not to be. That's the question!

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; // 字变白色
}

Home

News

Contact

About

// 这里左边外边距设置 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;
}

Home

News

Contact

About

* 处的 overflow: hidden; 因为父级元素（ul）不设置高度时，高度由随内容增加自适应高度。当父级元素内部的子元素 (li) 全部都设置浮动 float(left)之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为 0。由于父级元素没有高度，下面的元素会顶上去，造成页面的塌陷。因此，需要给父级加个 overflow:hidden 属性，这样父级的高度就随子级容器及子级内容的高度而自适应。不过我试了一下 div 里有 padding:20px; 有没有这个 overflow: hidden; 并不影响页面效果。

3. 粘性导航栏

就是在 ul 的样式里加入
position: -webkit-sticky; // 这一句其实是多写的，为了适应更多游览器的内核
position: sticky;
top: 0;