第二章：CSS基础

最新推荐文章于 2023-05-16 22:28:13 发布

祝你新年快乐那般美好

最新推荐文章于 2023-05-16 22:28:13 发布

阅读量330

点赞数

文章标签：前端 css 开发语言

本文链接：https://blog.csdn.net/weixin_46225406/article/details/121575598

版权

2.1 CSS简介

Cascading Style Sheets
用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果

h1{
   
color:white;
font-size:14px;
}

选择器（Selector）
{
   
	属性（Property）：属性值（Value）
}

选择器：选中要给那些元素定义样式
- eg：选择器是h1，说明要给h1标签定义样式
属性：给元素设置某个属性
- eg：color是颜色属性
属性值
- eg：while：白色
声明（Declaration）

声明=属性+属性值
声明块=花括号+多条声明
规则=选择器+声明块

在页面中使用CSS

<!--  外链：把CSS的定义放在一个单独的文件里，用link标签引入到页面里  -->
<link rel="stylesheet" href="/assets/style.css">
<!--  推荐使用第一种方法，更利于代码的维护  -->

<!--  嵌入：把样式代码嵌入到html里  -->
<style>
    li {
      margin: 0; list-style: none; }
    p {
      margin: lem 0; }
</style>

<!--  内联：不好  -->
<p style="margin:lem 0">Example Content</p>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Blog</title>
    <style>
        h1 {
     
         color:orange;
         foot-size:24px;
       }
       p {
     
         color:gray;
         foot-size:14px;
         line-height:1.8;
       }
     </style>
<body>
    <h1>Web框架的架构模式探讨</h1>
    <p>在写干货之前，我想先探讨两个问题，模式的局限性？模式有什么用？</p>
</head>
</html>

在这里插入图片描述

代码风格：编程风格
每条声明写一行
两条规则之间空一行

2.2基础选择器

CSS：Cascading Style Sheets
用来定义页面元素的样式

选择器Selector

找出页面中的元素，以便给他们设置样式
使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置

通配选择器：可以匹配页面中所有元素

<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
* {
     
  color:red;
  font-size:20px;
}
</style>

标签选择器：通过标签名选中一个元素。

<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
h1 {
     
  color:orange;
 }
 p {
     
  color:gray;
  font-size:20px;
}
</style>

id选择器：通过id属性选择元素，id的值在整个页面中必须是唯一的

<header>
    <h1 id="logo">
        <img src="/h5.png" width="64"
            alt="HTML5 logo">
         HTML5 文档
    <h1>
</header>

<style>
    #logo {
     
        foot-size:60px;
        foot-size:200;
    }
</style>

类选择器：通过Class属性来选择元素
class的值在页面中可以出现多次，把有相同样式的标签起相同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

最低0.47元/天解锁文章

祝你新年快乐那般美好

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第二章：CSS基础

第二章：CSS 基础2.1 CSS简介Cascading Style Sheets用来定义页面元素的样式设置字体和颜色设置位置和大小添加动画效果h1{color:white;font-size:14px;}选择器（Selector）：选中要给那些元素定义样式eg：选择器是h1，说明要给h1标签定义样式属性（Value）声明（Declaration）在页面中使用CSS<link rel="stylesheet" href="/as
复制链接

扫一扫