CSS基础

最新推荐文章于 2023-05-21 22:59:20 发布

╲ゞ可爱的小鱼ゞ╲

最新推荐文章于 2023-05-21 22:59:20 发布

阅读量186

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_56200957/article/details/117789626

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS

CSS概念
- - css书写位置
选择器
块、行内、行内块

CSS概念

层叠样式表 (Cascading Style Sheets，三个单词字头缩写为 CSS），他是专门用于修饰页面样式的。比如，可以更改内容的字体、颜色、大小以及间距，或是将其分列，或是添加动画等等。

html:超文本标记语言，网页的结构搭建，页面布局
css:层叠样式表,网页的修饰，样式的渲染
javascript:解释型的编程语言，用于与页面的交互

CSS与HTML属性使用原则

html文件书写样式的缺点：
- html代码变得杂乱
- 样式只用于修饰该标签，复用性很差
- 样式需要更改的时候不利于维护
使用css书写样式的优点（w3c建议我们尽量使用css的方式取代html属性）
- 样式复用性高
- 方便维护
- 使用ui框架更加便捷美观

css的术语

属性（如：color、background-color）
值（多指数字）
关键字（css中的关键单词比如center）
属性值（值+关键词+功能符如：1px solid rgb(0,0,0)）
声明（属性加属性值color：red；）
功能符（函数）
声明块{}
选择器（用来选择目标元素的特定或者指定名字）
长度单位比如：px、pt、em、rem、vw、vh、%、deg、s、ms 等
- 不换行换行均可以，但建议换行更清晰
- 如果数值为0可以不写单位，其他必须写
- 一个样式声明列表中最后一个样式值可以不写分号其他必须写
- 多个{}之间不写分号

css书写位置

① 内联样式
- 内联样式也可以叫行内样式，就是在html文件中的html标签中，使用style属性的样式值来完成元素的样式渲染。

<span style="样式声明"></span> 
<h1>没有加任何样式，只有标签自己的样式</h1> 
<h1 style="background-color: red;">加入字体颜色样式</h1> 
<h1 style="background-color: blue;font-size: 40px;">加入字体颜色和字体大小样式</h1>

② 内部样式
- 在网页的头部 <head> 标签中增加一对 <style></style> 标签，在 <style> 标签记中定义该网页的所有样式。

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        选择器 {样式列表} 
    </style>
</head>

③ 外部样式
- 外部样式的书写方法：
- 单独创建css文件，在html的head标签中中link标签引入css文件。
- href叫做超文本引用，它的属性值是需要引用css文件的路径。
- rel属性指引入文件于当前html的关系，必写属性。

<head> 
<link rel="stylesheet" href="wai.css"> 
</head>

选择器

基础选择器

【注意】相同的选择器不同的属性声明，不会被覆盖而是共同应用。

① 通用选择器 ( * )
- * 号，选择html文件内所有的元素 *{样式声明}
- 最常用的用法是 *{margin:0;padding:0} 清除浏览器的内外边距。但它的缺陷是性能太低，所有的元素不论是否有内外边距都会渲染，但可以做练习时使用。

<style>
    *{
        margin:0;
        padding:0;
    }
</style>

② 元素选择器（标签选择器）
通过标签的名字来选择html元素，权重值为1，比如： div {样式声明}
选择页面上所有同类标签
弊端是当很多相同标签并存的时候，就会出现没办法精准定位的情况

<style>
    div{
        color:red;
        font-size:40px;
    }
</style>

③ id选择器 ( # )
给标签的前半部分增加一个属性 id 这个属性可以指定一个唯一的不重复的值 , 权重值100
id名不能以数字开头，不建议使用中文命名，尽量见名知意
多个单词连接可以用- 、_、驼峰
一个id选择器只能调用一次，多次调用不符合w3c规范
一个标签只能调用一个id选择器
一个标签可以同时调用类选择器和id选择器

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #r {color: red;}
        #b {color: blue;}
        #g {color: green;}
    </style>
</head>
<body>
    <div id="r">div我要红色</div>
    <div id="b">div我要蓝色</div>
    <div id="g">div我要绿色</div>
</body>

④ 类选择器【重要】( class )
类选择器先要使用标签的 class 属性赋值，类选择器的权重值10
不能以纯数字或以数字开头定义类名 , 不建议使用中文命名
多个单词连接可以用 - 、_、驼峰
谁调用谁生效调用 class=‘类名’
一个类选择器可以被多个标签调用
一个标签可以同时调用多个类选择器

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .color-r {color: red;}
        .font-20 {font-size: 20px;}
        .font-30 {font-size: 30px;}
    </style>
</head>
<body>
    <p class="color-r font-20">p我想20号字红色</p>
    <p class="color-g font-20">p我想20号字绿色</p>
    <p class="color-r font-30">p我想30号字红色</p>
</body>

⑤ 群组选择器 ( 逗号 )
多个选择器名用逗号连接，可以一起完成共同样式的指定
- div,p,span {color: red;}
群组选择器并不是只能使用相同类型的选择器，可以是各种选择器一起参与
- #mydiv.b,h4 {color: blue;}

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    /* 群组用逗号连起来，相当于“和” */
      div,p,span{ 
          color: red;
      }
    </style>
</head>
<body>
    <div>div要红字</div>
    <p>p要红字</p>
    <span>span要红字</span>
</body>

关系选择器

在html结构中存在三种关系，“兄弟关系”、“父子关系”、“后代关系”

① 后代选择器 ( 空格 )
发生前提是嵌套的关系
祖先元素后代元素 {样式声明} 空格不要忘记
父元素在前子元素在后，用空格连在一起
后代选择器可以无限制的隔代
只要能代表父元素，子元素，后代选择器可以是任意选择器的组合

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .a div div {
      color: blue;
    }
  </style>
</head>
<body>
<!--a是祖先 b是爸爸 c是儿子  -->
  <div class="a">
     <div class="b">
         <div class="c">刘畅</div>
         <div class="c">刘欢</div>
     </div>
     <div class="b">刘邦</div>
     <div class="b">刘秀</div>
  </div>
</body>

② 子代选择器 ( > )
可以选中某个元素的直接子元素，与后代不同的是子代选择器的范围更小。
父级元素 > 子级元素 {样式声明}
层级可以向后代选择器一样延申,区别就是子代是>连接,后代是空格连接
- .baba > div > div {字体颜色;}

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .x > div>div{
      color: red;
    }
  </style>
</head>
<body>
  <!-- 子代选择器 -->
  <div class="x">
      <div class="y">y1</div>
      <div class="y">
         <div class="z">z1</div>
         <div class="z">z2</div>
      </div>
      <div class="y">y3</div>
  </div> 
</body>

③ 兄弟选择器 ( ~ )
同一层的关系选择器，可以选中该元素后面的兄弟元素。
- 某元素选择器 ~ 该元素后面的所有兄弟 {样式声明}
需要注意的是兄弟选择器可以选到该元素后面的兄弟，而选不到之前的。

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .a ~ li {
      color: red;
    }
    .a ~ .b {
      color: blue;
    }
  </style>
</head>
<body>
  <ul>
    <li>1</li>
    <li class="a">2</li>
    <li>3</li>
    <li>4</li>
    <li class="b">5</li>
    <li class="b">6</li>
  </ul>
</body>

④ 相邻选择器 ( + )
同一层的关系选择器，可以选中参照的元素后面紧挨着被参照元素的选择器。
某元素选择器 + 该元素后面的唯一相邻的兄弟 {样式声明}
需要注意的是，相邻兄弟选择器只能选中 “紧紧相邻” 的一个兄弟

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    li + li {
      color: green;
    }
    /* .b + li {
      color: red;
    } */
  </style>
</head>
<body>
  <ul>
    <li>1</li>
    <li class="a">2</li>
    <li>3</li>
    <li>4</li>
    <li class="b">5</li>
    <li class="c">6</li>
  </ul>
</body>

伪类选择器

伪类选择器的作用是匹配同一个元素，不同状态下的样式
选择器:伪类 {样式声明}
a:link {样式声明} 没有被打开之前，或者没被打开过（ a:link 特有）
a:visited {样式声明} 访问过后 ( a:visited 特有 )
div:hover {样式声明} 鼠标悬停
p:active {样式声明} 点击激活 (点击切换)
input:focus {} 属性代表input标签获取焦点的样式( 标签的属性)
input:cheaked {} 属性代表input单选、复选等type类型被选中后的样式( 标签的属性)

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      width: 150px;
      height: 50px;
      background-color: red;
      color: #fff;
    }
    /* 当鼠标移入到div时xxxx */
    div:hover {
      background-color: blue;
      font-size: 20px;
    }
    div:active {
      background-color: hotpink;
    }
    /* 未访问过的 */
    a:link {
      color: red;
    }
    /* 已访问过的 */
    a:visited {
      color: green;
    }
    /* 鼠标获取焦点时 */
    .in1:focus {
      background-color: green;
    }
    .in2:checked + label{
      color: red;
    }
    img {
      width: 20px;
    }
    .in2:checked ~ img {
      width: 100px;
    }
    p {
      background-color: lawngreen;
      /* 元素消失属性 */
      display: none;
    }
    .in2:checked ~ p {
      /* 元素显示属性 */
      display: block;
    }
  </style>
</head>
<body>
  <div>按钮</div>
  <a href="http://www.codeboy.com:9999">aaa</a>
  <a href="http://www.jdas.com">bbb</a> <br>
  <input type="text" class="in1">
  <input type="checkbox" class="in2" id="in2"><label for="in2">同意</label>
  <!-- 自己随便找张图放入src中 -->
  <img src="./004.png" alt="">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, ut eaque.</p>
</body>

伪元素选择器

CSS 伪元素用于设置元素的“指定部分”的样式
:before 表示元素最前边的部分，紧随着标签的部分
:after 表示元素的最后边的部分，紧随着标签的部分
:before{content:""}:after{content:""} content必须写
两个冒号 ( :: ) 而不是一个冒号 ( : )，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素。大多数
浏览器都支持这两种表示方式。

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 在标签前部增加内容 */
    p::before {
      content: "❤";
      color: red;
    }
    /* 在标签的后部加入 */
    p::after {
      content: "!";
    }
  </style>
</head>
<body>
  <p>唐三</p>
</body>

- 简单的下拉菜单小案例 (便于理解)

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    h1 {
      width: 150px;
      background-color: aqua;
    }
    .xlcd:hover > ul {
      display: block;
    }
    ul {
      width: 150px;
      background-color: palevioletred;
      /* 先让粉红色消失 */
      display: none;
    }
    .xlcd {
      /* background-color: yellow; */
    }
    .a {
      background-color: peru;
    }
    .b {
      height: 100px;
    }
  </style>
</head>
<body>
  <!-- 下拉菜单 -->
  <div class="xlcd">
    <h1>菜单</h1>
    <ul>
      <li>111111</li>
      <li>222222</li>
      <li>333333</li>
    </ul>
  </div>
</body>

块、行内、行内块

块元素
- 典型代表 div p h1-h6 ul ol li dl form
- 特点：
  - 独占一行
  - 可以设置宽高
  - 块元素不设置宽度的时候，默认父元素的宽度，不设置高度的时候，默认高度为0，内容会撑开高度
行内元素
- 典型代表 a span strong b em ins u s i
- 特点：
  - 在一行上显示
  - 行内元素不能设置宽和高
  - 行内元素默认宽高为0，内容会撑开宽高
  - 行内与元素代码换行生成缝隙
行内块元素
- 典型代表 input img textarea td
- 特点：
  - 在一行显示
  - 可以设置宽高
  - 行内块元素换行生成缝隙

╲ゞ可爱的小鱼ゞ╲

关注

1
点赞
踩
0

收藏

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

CSSCSS概念css书写位置选择器基础选择器关系选择器伪类选择器伪元素选择器块、行内、行内块CSS概念层叠样式表 (Cascading Style Sheets，三个单词字头缩写为 CSS），他是专门用于修饰页面样式的。比如，可以更改内容的字体、颜色、大小以及间距，或是将其分列，或是添加动画等等。html:超文本标记语言，网页的结构搭建，页面布局css:层叠样式表,网页的修饰，样式的渲染javascript:解释型的编程语言，用于与页面的交互CSS与HTML属性使用原则html文件书
复制链接

扫一扫

专栏目录