关于前端:CSS小记

8次阅读

共计 2492 个字符，预计需要花费 7 分钟才能阅读完成。

======CSS

—– 在 HTML 中引入 CSS

形式 1：通过 style 属性引入 css（不举荐）

1. 通过标签上的 style 属性给 div 设置款式
边框:2px solid red
字体大小:26px
背景色彩为:pink
-->
<div style="border:2px solid red;font-size:26px; background:pink;">
这是一个 div...</div>

因为下面这种形式是将 css 款式代码，间接写在标签上的 style 属性外部，如果属性太多，容易造成页面构造的凌乱，不利于前期的保护。
将款式代码写在标签上，款式代码只对以后标签失效，代码无奈复用！并且应用这种形式无奈将 html 标签和 css 款式进行拆散! 因而不举荐应用这种形式！（这种通过 style 属性增加的款式，叫做行内款式 / 内联款式）

形式 2：通过 style 标签引入 css

在 head 标签外部能够增加一个 style 标签，在 style 标签外部能够间接书写 css 款式这种形式是将所有的 css 款式代码集中在一个 style 标签外部对立治理，这种形式不会造成页面构造的凌乱，并且能够实现代码的复用！初步的实现了将 html 标签代码和 css 款式代码进行了拆散!

<!-- 2. 通过 style 标签给 span 设置款式如下：边框: 2px solid green
字体大小: 30px
字体加粗
-->
<head>
<meta charset="utf-8">
<style type="text/css">
    /* ****** CSS 款式 ****** */
span{ /* 为以后 html 中的所有 span 标签设置款式 */
border:2px solid green;
font-size:30px;
font-weight:bolder; /* bold/bolder */
}
</style>
</head>

形式 3：通过 link 链接引入内部的 css 文件

在 head 标签外部，通过一个 link 标签能够引入内部的 CSS 文件这种形式是将所有的 css 代码集中在一个独自的 css 文件中对立治理，真正的实现了将 css 代码和 html 代码的拆散，实现了代码的复用。代码示例：html 中引入 demo.css 文件

<!-- 3. 通过 link 标签引入内部的 css 文件，为 p 元素设置款式如下：边框: 2px solid blue;
字体色彩:red
字体设置为华文琥珀
设置首行文本缩进 50px
-->
<!-- 引入 demo.css 文件(中的款式) -->
<link rel="stylesheet" href="demo.css" />
@charset "UTF-8";
p{
border: 2px solid blue;
color: red;
font-family: "华文琥珀";
text-indent: 50px;
}

—–CSS 选择器
css 选择器就是可能在 html 中帮忙咱们选中元素进行润饰的一门技术

标签名选择器

通过元素名称 (或标签名称) 选中指定名称的所有标签格局: 元素名 / 标签名{css 款式 …}

将所有 span 标签的背景色彩设置为 #efbdef, 设置字体大小为 22px，字体加粗；*/
span{ /* 选中所有的 span 元素 */
background-color:#efbdef;
font-size: 22px;
font-weight: bolder;
}

class 选择器

能够为元素增加一个通用的属性 — class，通过 class 属性为元素设置所属的组，class 值雷同的元素则为一组。通过 class 值能够选中这一组的元素，为元素增加样式。格局：.class 值{css 款式 …}

1)将所有的 span（然而不包含 div 和 p 标签下的 span）的背景色彩设置为 #faf77b，边框改为 2px solid cyan；(2)将 div 下的 span 和内容为 "span111" 的 span，背景色彩设置为 #5eff1e、字体色彩
设置
#ec0e7e；*/
.s1{ /* 选中所有 class 值为 s1 的元素 */
background: #faf77b;
border: 2px solid cyan;
}
.s2{ /* 选中所有 class 值为 s2 的元素 */
background: #5eff1e;
color: #ec0e7e;
}
一个元素也能够设置多个 class 值，多个 class 值两头用空格分隔，`<span class="s1 s2" >span111</span>`
示意以后元素同时属于多个分组，多个分组上设置的款式也会同时作用在以后元 素上。如果多个分组设置了雷同的款式（然而值不一样），款式会发生冲突，写在前面 的款式会笼罩后面的款式！

id 选择器

通过标签上通用的属性 id，能够为标签设置一个举世无双的编号（id 值应该是唯一的），通过 id 值能够惟一的选中一个元素。格局：#id 值{css 款式}

20px。*/
#p1{ /* 选中 id 值为 p1 的元素 */
font-size:24px;
color: #a06649;
text-indent: 20px;
}
<p id="p1"> 这是一个 p 元素!!!</p>

后辈选择器

选中指定元素外部的指定后辈元素格局: 先人后辈{css 款式 …}

pink;*/
p span{ /* 匹配所有 p 元素外部的所有 span 元素 */
font-size:18px;
color: red;
background: pink;
}
/* p,span{} 匹配所有的 p 元素和所有的 span 元素 */
<p id="p1">
这是一个 p 元素!!!
<span> 这是一个 span 元素!!!</span>
</p>

属性选择器

为所有的文本输入框，设置背景色彩为 #FF7CCC、字体大小 22px，首行文本缩进
15px；*/
input[type='text']{ /* 匹配所有的 input 并且 type 值为 text 的元素 */
background: #FF7CCC;
font-size: 22px;
text-indent: 15px;
}
input[type='text'][name='email']{
/* 选中所有的 input 并且 type 值为 text、并且 name 为 email 的元素 */
background : yellow;
}

正文完