前端与CSS

我不是小仙女
114 阅读3分钟

前端与CSS(Cascading Style Sheets)

  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果

image-3.png

在页面中使用css

<!--外链-->
<link rel="stylesheet" href="/assets/style.css">
​
<!--嵌入-->
<style>
    li {margin: 0;}
    p {margin: len 0;}
</style>
​
<!--内联-->
<p style="margin: lem 0">
    Example Content
</p>

选择器(Selector)

  • 找出页面中的元素，以便给他们设置样式

  • 使用多种方式选择元素

    • 按照标签名、类名或id
    • 按照属性
    • 按照DOM树中的位置
通配选择器

通配选择器（*）选择页面上的所有的 HTML 元素。

<h1>This is heading</h1>
<p>this is some paragraph.</p>
​
<style>
* {
  color: red;
  font-size: 20px;
}
</style>
标签选择器

标签选择器根据标签名称来选择 HTML 元素。

<h1>This is heading</h1>
<p>this is some paragraph.</p>
​
<style>
h1 {
  color: orange;
}
p {
  color: gray;
  font-size: 20px;
}
</style>
id 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

<h2 id = "logo">id选择器</h2>
<style>
    #logo {
        font-size: 60px;
        font-weight: 200;
    }
</style>
类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

<h2>
    todo list(类选择器)
</h2>
<ul>
    <li class="done">learn html</li>
    <li class="done">learn css</li>
    <li>learn javascript</li>
</ul>
<style>
    .done {
        color: gray;
        text-decoration: line-through;
    }
</style>
属性选择器

带有特定属性的 HTML 元素设置样式

我们可以设置带有特定属性或属性值的 HTML 元素的样式。

[attribute] 选择器

[attribute] 选择器用于选取带有指定属性的元素。

下例选择所有带有 target 属性的 元素；

a[target] {
background-color: yellow;
}

<label>用户名：</label>
<input value="zhao" disabled />
​
<label>密码：</label>
<input value="123456" type="password" />
​
<style>
  [disabled] {
    background: #eee;
    color: #999;
  }
</style>
[attribute="value"] 选择器

[attribute="value"] 选择器用于选取带有指定属性和值的元素。

下例选取所有带有 target="_blank" 属性的 元素：

a[target="_blank"] { 
background-color: yellow;
}

<p>
  <label>密码：</label>
  <input type="password" value="123456" />
</p>
​
<style>
  input[type="password"] {
    border-color: red;
    color: red;
  }
</style>
[attribute$="value"] 选择器[attribute$="value"]选择器

[attribute$="value"] 选择器用于选取指定属性以指定值结尾的元素。

[attribute^="value"] 选择器用于选取指定属性以指定值开头的元素。

<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>
​
<style>
  a[href^="#"] {
    color: #f54767;
    background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
    padding-left: 1.1em;
  }
 
  a[href$=".jpg"] {
    color: deepskyblue;
    background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
    padding-left: 1.2em;
  }
</style>
伪类选择器(pseudo-classes)
<label>
  用户名：
  <input class="error" value="aa">
</label>
<span class="error">
  最少3个字符
</span>
​
<style>
  .error {
    color: red;
  }
  
  input.error {
    border-color: red;
  }
</style>

  • 不基于标签和属性定位元素

  • 几种伪类

    • 状态伪类
    • 结构性伪类

伪类用于定义元素的特殊状态。

例如，它可以用于：

  • 设置鼠标悬停在元素上时的样式
  • 为已访问和未访问链接设置不同的样式
  • 设置元素获得焦点时的样式
/* 未访问的链接 */
a:link {
color: #FF0000;
}
​
/* 已访问的链接 */
a:visited {
color: #00FF00;
}
​
/* 鼠标悬停链接 */
a:hover {
color: #FF00FF;
}
​
/* 已选择的链接 */
a:active {
color: #0000FF;
}

first-child 伪类

:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。

匹配首个<p>元素

<ol>
    <li>阿凡达</li>
    <li>泰坦尼克号</li>
    <li>复仇者联盟</li>
</ol>
<style>
    li {
        list-style-position: inside;
        border-bottom: 1px solid;
        padding: 0.5em;
    }
​
    li:first-child {
        color: coral;
    }
    li:last-child{
    border-bottom:none;
    }
</style>

组合

image-4.png

<article>
  <h1>拉森火山国家公园</h1>
  <p>拉森火山国家公园是位于...</p>
  <section>
    <h2>气候</h2>
    <p>因为拉森火山国家公园...</p>
    <p>高于这个高度，气候非常寒冷...</p>
  </section>
</article>
​
<style>
  article p {
    color: black;
  }
​
  article > p {
    color: blue;
  }
​
  h2 + p {
    color: red; 
  }
</style>

其他

颜色

  • RGB

  • HSL

    • Hue 色相
    • Saturation 饱和度
    • Lightness 亮度、

  • alpha 不透明度

字体 font-family
<style>
  h1 {
    font-family: Optima, Georgia, serif;
  }
  body {
    font-family: Helvetica, sans-serif;
  }
</style>

使用建议

  • 字体列表最后写上通用字体族
  • 英文字体放在中文字体前面
h1 { font-family: Optima, Georgia, serif; } body { font-family: Helvetica, sans-serif; }
font-size

font-size CSS 属性指定字体的大小。因为该属性的值会被用于计算 em 和 ex 长度单位，定义该值可能改变其他元素的大小。

  • 关键字 small medium large
  • 长度 px em
  • 百分数
<section>
  <h2>A web font example</h2>
  <p class="note">Notes: Web fonts ...</p>
  <p>With this in mind, let's build...</p>
</section>
​
<style>
  section {
    font-size: 20px;
  }
​
  section h1 {
    font-size: 2em;
  }
​
  section .note {
    font-size: 80%;
    color: orange;
  }
</style>
line-height

设置以百分比计的行高：

<section>
  <h1>Font families recap</h1>
  <p>As we looked at in fundamental text and font styling, the fonts applied to your HTML can be controlled using the font-family property. This takes one or more font family names. </p>
</section>
​
<style>
  h1 {
    font-size: 30px;
    line-height: 45px;
  }
​
  p {
    font-size: 20px;
    line-height: 1.6;
  }
</style>
文本对齐

text-align 属性用于设置文本的水平对齐方式。

文本可以左对齐或右对齐，或居中对齐。

下例展示了居中对齐以及左右对齐的文本（如果文本方向是从左到右，则默认为左对齐；如果文本方向是从右到左，则默认是右对齐）：

h1 {
  text-align: center;
}
​
h2 {
  text-align: left;
}
​
h3 {
  text-align: right;
}
文字缩进

text-indent 属性用于指定文本第一行的缩进：

实例

p {
  text-indent: 50px;
}
text-decoration 属性

设置 h1、h2、h3、h4 元素的文本修饰：

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;
avatar
文章
阅读
粉丝