Então aprenda a folha de estilo CSS:
(45 mensagens) Folha de estilo CSS learning_one day321's Blog-CSDN Blog
Parte II (continuação):
transparência opacidade
opacity significa transparência, geralmente: opacity:1. Essa é a transparência padrão, ou seja, opaca.
O valor é geralmente 0~1. Quanto menor o valor, maior a transparência.
Pode ser usado com a tag img:hover. Indica que, ao passar o mouse, a imagem mudará de estilo.
Por exemplo:
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}Barra de navegação: (interessante beliscar)
A barra de navegação introduziu vários tipos, estruturas, atributos, rótulos. No entanto, a forma mais adequada é usar tags de elementos <ul>, <li>.
Dividido em barra de navegação lateral vertical e barra de navegação horizontal:
Barra de navegação lateral vertical:
O mais importante é a mudança de cor desses dois links clicados. Indica o estilo deste link ativo e o estilo desta página ativa. Observe que esses dois são indispensáveis.
li a.active { background-color: #04AA6D; cor branca; }
li a:hover:not(.active) { //Se o elemento: not(.active) estiver faltando, fará com que o estilo da página ativa mude quando passarmos o mouse sobre ela.
cor de fundo: #555;
cor: branco;
}
Nota: posição: fixo precisa ser definido. Este elemento é importante. Provavelmente apenas a barra lateral usará esse elemento.
exemplo:
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>
Barra de navegação horizontal:
A diferença entre a barra de navegação horizontal e a barra de navegação acima é que existem várias maneiras de configurá-la. Defina o modo de ponto flutuante: float:left. Defina o modo inline: display: inline. Defina a navegação fixa: exibição:adesiva.
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>Exemplo estendido:
Navbar com lista suspensa: Há um exemplo disso no final deste link.
Barra de navegação horizontal CSS (w3schools.com)
lista suspensa
.dropdown-content { display: none;} Este elemento oculta o estilo de conteúdo suspenso. Este estilo pode ser ativado com o flutuador abaixo.
.dropdown:hover .dropdown-content { O elemento oculto pode ser reiniciado na pseudoclasse.
exibir: bloquear;
}
Exemplo:
<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>
Estilo de imagem (ícone pequeno), seletor de atributo
Sprite da imagem:
background: url(img_navsprites.gif) 0 0;- Defina a imagem de fundo e sua posição (0px esquerda, 0px superior)
Na verdade, é semelhante a uma imagem longa e, em seguida, extrai uma parte dela separadamente. Esta é a imagem longa em muitos aplicativos.
Por exemplo, uma imagem da barra de navegação:
background:url(" ") -47px -47px; o próximo pixel é o pixel de valor da parte da sombra
Seletor de atributo:
[atributo] Por exemplo: [a] Desta forma, o estilo do atributo de todos os links será alterado.
【attribute="value"】 Por exemplo: a[target="_blank"]
[attribute~="value"] Por exemplo: [title~="flower"] especifica que o título contém o atributo de flor. Palavras completas!
[attribute|="value"] Por exemplo: [class|="top"] É semelhante ao uso anterior. diferença, pode ser seguido por "-".
[attribute^="value"] Por exemplo: [class^="top"] O cabeçalho contém o atributo top. O valor não precisa ser uma palavra inteira!
[attribute$="value"] Por exemplo: [class$="test"] contém o atributo de teste no final. Idem.
[attribute*="value"] está correto, desde que o atributo contenha isso. [class*="te"]
formulário, contador
input[ type=text ]: focus //Este é um botão de foco, quando clicado, seu estilo muda.
redimensionar: nenhum. Quando esta propriedade está configurada, a propriedade do formulário não permite o redimensionamento. (Alguns navegadores podem arrastar o tamanho, definir essa propriedade desativará o arrastar.)
contador:
Tem as seguintes propriedades:
counter-reset- Criar ou redefinir contadorescounter-increment- Incrementar o valor do contadorcontent- conteúdo de inserção geradocounter()ou função - adicione o valor do contador do elementocounters()
Por exemplo: Isso define o número de h2. Conte pelo número de h2.
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}A coisa mais importante sobre esse atributo é o contador aninhado: como os estilos 1.1, 1.2, 1.3. São necessários dois contadores. E o conteúdo no último contador é o contador anterior.
Devido a questões de tempo, preciso modificar meu plano de estudos. O método anterior ainda é muito lento. Como não há aplicação prática, apenas leio novamente e depois anoto esse conteúdo, como se copiasse novamente. Não podemos continuar assim. Sugestão: apenas assista, há pontos de conhecimento para treinamento do tópico . Outros pontos de conhecimento, não faça anotações, você pode ler se quiser. Tente não olhar. Espere até que você realmente precise.