CSS入门学习笔记01

去追风，去看海

已于 2022-06-29 16:34:22 修改

阅读量143

点赞数

分类专栏：前端文章标签： css html

于 2020-09-24 14:23:52 首次发布

本文链接：https://blog.csdn.net/weixin_40959890/article/details/108771075

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS的作用、语法结构以及常见的三种引入方式：行内样式、内部样式和外部样式。此外，还讲解了CSS选择器的类型，包括基本选择器、ID选择器、类选择器、属性选择器和伪元素选择器，并通过实例展示了它们的用法。通过学习，读者可以掌握如何有效地应用CSS来美化HTML页面。

摘要由CSDN通过智能技术生成

css属性选择器（w3school.com.cn)

css包含选择器

css伪元素选择器

css样式作用和语法

CSS (Cascading Style Sheets) ：指层叠样式表 . 指使⽤不同的添加⽅式，给同⼀个 HTML标签添加样式，最后所有的样式都叠加到⼀起，共同作⽤于该标签。类似于我们使⽤的美颜相机 .

主要⽤于设置HTML⻚⾯中的⽂本内容（字体、⼤⼩、对其⽅式等）、图⽚的外形（⾼宽、边框样式、边距等）以及版⾯的布局等外观显示样式。
作⽤: 美化⻚⾯作⽤. HTML负责显示数据, CSS负责美化效果
语法结构

选择器{
 属性名:属性值;
 属性名:属性值; 
}

选择器: 指定对HTML的哪个标签起作⽤

div {
    width: 200px;
    height: 200px;
    border: red 1px solid;
}

css引入方式

⾏内样式:
- 在HTML标签中添加属性 style="属性:属性值"
- 作⽤域最⼩,作⽤当前标签; ⾏内样式的优先级最⾼

<body>
     <h3 style="color: red;">你好Java</h3>
</body>

css引入方式二_内部

内部样式:
- 在HTML⻚⾯⾥⾯写CSS代码, ⼀般写在<head>中, 使⽤标签 style , 属性: type="text/css"
- 作⽤是当前整个⻚⾯有效，下面代码设置h3标签为巧克力色，所以整个页面的h3标签内容都会显示巧克力色

<html>
     <head>
         <meta charset="UTF-8">
         <title></title>
         <style type="text/css">
             h3{color: chocolate;}
         </style>
     </head>
     <body>
         <h3>h3标签</h3>
         <h3>哈哈</h3>
     </body>
</html>

css引入方式三_外部

外部样式:
- CSS样式定义在另⼀个⽂件中,后缀名.css (⽂本⽂件)
- 在HTML⻚⾯中,引⼊样式表, 使⽤link标签写在head中
  - 属性: href="css⽂件路径" | type="text/css" | rel="引⼊的⽂件和当前⻚⾯是什么关系"
- 作⽤范围最⼤,哪个⻚⾯引⼊,哪个有效

<html>
     <head>
         <meta charset="UTF-8">
         <title></title>
         <link href="css/1.css" type="text/css" rel="stylesheet"/>
     </head>
     <body>
         <h3>h3标签</h3>
         <h3>哈哈</h3>
     </body>
</html>

css/1.css

h3{
 color: blue;
 }

css选择器

css基本选择器

选择器就是对 HTML 标签设置样式作⽤

标签元素选择器
- ⽤HTML标签名称作为选择器，按标签名称分类，为⻚⾯中某⼀类标签指定统⼀的CSS样式。
- 其基本语法格式如下：标签名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
ID选择器
- id选择器使⽤“#”进⾏标识，后⾯紧跟id名.
- 其基本语法格式如下： #id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- 需要在html标签上,添加属性id="选择器名", 配合ID选择器进⾏使⽤
class选择器,类选择器
- 类选择器使⽤“.”（英⽂点号）进⾏标识，后⾯紧跟类名
- 其基本语法格式如下： .类名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- 需要在html标签上,添加属性class="选择器名", 配合class选择器进⾏使⽤

注意:
 尽量不要使⽤ID选择器,如果需要使⽤ID选择器. 要保证：ID的属性值具有唯⼀性
 因为后⾯学习的JavaScript技术中: 对象document中的⽅法getElementById("one"),会把标签变成对象,只要找到第⼀个了,后⾯就不找了. 所以,ID的属性值要唯⼀.
 当使⽤ID选择器和class选择器, 对同⼀个标签设置相同属性时, ID选择器 优先级⾼于class选择器

<!DOCTYPE html>
<html>
     <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
             /*标签元素选择器,选择器名字和标签名相同*/
             h1{
                 color: red;
             }
             /*ID选择器*/
             #one{
                 color: blue;
             }
             /*class选择器*/
             .two{
                 color: yellow;
             }
         </style>
     </head>
     <body>
         <h1>123</h1>
         <h1>456</h1> 
         <h2 id="one">789</h2>
         <h2 class="two">789</h2>
     </body>
</html>

css属性选择器（w3school.com.cn)

属性选择器，在标签后⾯使⽤中括号标记

其基本语法格式如下：标签名 [ 标签属性 =’ 标签属性值 ’] { 属性 1: 属性值 1; 属性 2: 属性值 2; 属性 3:属性值 3; }

<!DOCTYPE html>
<html>
     <head>
         <meta charset="UTF-8">
         <title></title>
         <style type="text/css">
             input[type="text"]{
                 color: red;
             }
 
             input[type="password"]{
                 background-color: green;
             }
         </style>
    </head>
     <body>
         ⽤户名<input type="text" /><br />
         密　码<input type="password" />
     </body>
</html>

css包含选择器

包含选择器，两个标签之间使⽤空格，给指定⽗标签的后代标签设置样式，可以⽅便在区域内编写样式。

其基本语法格式如下：⽗标签后代标签 { 属性 1: 属性值 1; 属性 2: 属性值 2; 属性 3: 属性值 3; }

<!DOCTYPE html>
<html>
     <head>
         <meta charset="UTF-8">
         <title></title>
         <style type="text/css">
             div span{
                 color: red;
             }
         </style>
     </head>
     <body>
         <div>哈哈</div>
         <div>
             <span>div中的span</span>
         </div>
         <span>就是span</span>
     </body>
</html>

css伪元素选择器

CSS 伪元素⽤于将特殊的效果添加到某些选择器。例如 : 超链接的不同状态都可以指定不同的效果.text-decoration: none文本信息去除下划线，text-decoration文本信息属性设置

四个状态: 没点过,点过,⿏标悬浮,激活
样式: 固定顺序 l-v-h-a

<!DOCTYPE html>
<html>
     <head>
        <meta charset="UTF-8">
         <title></title>
         <style type="text/css">
             a:link{color: #333333; text-decoration: none;}/*没点过*/
             a:visited{color: #333333;text-decoration: none;}/*点过*/
             a:hover{color: red;text-decoration: none;}/*⿏标悬浮*/
             a:active{color: green;text-decoration: none;}/*激活*/
         </style>
     </head>
     <body>
         <a href="http://www.jd.com">京东</a>
         <a href="http://www.baidu.com">百度</a>
     </body>
</html>