css基础

最新推荐文章于 2024-07-12 14:38:32 发布

周超&.

最新推荐文章于 2024-07-12 14:38:32 发布

阅读量51

点赞数

文章标签： css

本文链接：https://blog.csdn.net/z12345zc/article/details/116012733

版权

           **CSS 基础**

1. 什么是 CSS?
CSS-Cascading Style Sheet [层叠样式表]是用于(增强)控制网页[html]样式并允许将样式信息与网页内容分离的一种标记性语言.
2.CSS 的作用?
给网页[html]的元素/标记/标签设置样式的。可以让 HTML 网页变得好看
3.在 HTML 网页中如何使用 CSS?
1.内联定义 (Inline Styles) 内联定义即是在[html]的元素/标记/标签的内部使用对象的 style 属性定义适用其的样式表属性。已达到控制当前 html 元素的样式。
在[html]的元素/标记/标签的开始标记中设置样式。
格式:<html 标记 style=”样式名称 1:样式值 1;样式名称 2:样式值 2”>显示的内容</html 标记> 例如:

 <html>
 <head>
 <meta charset="utf-8"> 
 <title>测试内联定义 CSS</title>
  </head>
   <body>
   <h1>1.内联定义</h1>
   <h2>在[html]的元素/标记/标签的开始标记中设置样式。</h2>
   <div style="width:200px;height:200px;background-color:red;"></div>
    </body>
    </html>

在这里插入图片描述
2. 定义内部样式块对象 (Embedding a Style Block)
格式

<head>
<style>
 css 选择器{ 
 css 样式名称:样式值;
  css 样式名称:样式值; 
  css 样式名称:样式值; } 
  </style>

链入外部样式表文件 (Linking to a Style Sheet)

先建立外部样式表文件（.css），然后使用 HTML 的 link 标记，将外部样式表文件（.css）导入进当前的 html 文件中。

   第一步：建立外部样式表文件（.css） 
   第二步：在 html 的 head 标记中使用 link 标记导入样式文件。、

格式： css 选择器{ css 样式名称:样式值; css 样式名称:样式值; css 样式名称:样式值; } css 选择器{css 样式名称:样式值;css 样式名称:样式值;css 样式名称:样式值;} 上面的样式定义格式是由 2 部分组成 1. css 选择器 2. 2. 具体样式设置

4.css 选择器
css 选择器是用来从 html 文件中选中/得到需要被样式控制的 html 标记。
1.元素选择器
例子：

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
  <title>测试元素选择器</title> 
  <style>
  td{
  font-size:34px; 
  } 
  a{
  text-decoration:none;
  } 
  </style>
   </head>
    <body>
    <h1>测试元素选择器</h1> 
    <h2>根据 html 元素的名称选中被控制的 html 标记</h2>
     <table border="1px" width="300px" height="200px">
 <tr> 
 <td><a href="#">张三</a></td>
  <td>23</td> 
  <td>西安</td>
   </tr> 
   <tr>
    <td><a href="#">李四</a></td>
     <td>23</td> 
     <td>西安</td> 
     </tr>
      <tr> 
      <td><a href="#">王五</a></td> 
      <td>23</td>
       <td>西安</td>
        </tr> 
        </table> 
        </body>
         </html>

在这里插入图片描述

2. id 选择器
根据给 html 标记设置的 id 属性来选中被控制的 html 标记。
如果要使用 id 选择器那么首先需要给 html 标记去设置 id 属性。
在这里插入图片描述

3. 类【class】选择器
根据给 html 标记设置的 class 属性来选中被控制的 html 标记。
如果要使用类【class】选择器那么首先需要给 html 标记去设置 class 属性。

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8"> 
 <title>测试类选择器</title> 
 <style>
 .p1{font-size: 30px;color: red;background-color: chartreuse;}
  .p2{font-size: 40px;color: blue;background-color: yellow;} </style> 
  </head>
   <body>
   <h1>类[class]选择器</h1> 
   <h2>根据给 html 标记设置的 class 属性来选中被控制的 html 标记</h2>
    <h2>如果要使用类【class】选择器那么首先需要给 html 标记去设置 class 属性。</h2> 
    <p class="p1">测试 class 选择器-p1</p>
     <p class="p1">测试 class 选择器-p1</p>
      <p class="p2">测试 class 选择器-p2</p>
       <p class="p2">测试 class 选择器-p2</p> 
       </body>
        </html>

在这里插入图片描述
4. 包含选择器
选择所有被父元素包含的子元素。

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
 <title>测试包含选择器</title>
  <style>
  div{ width: 400px; 
  height: 400px; 
  background-color: chartreuse;
   }
   div img{ width: 100px;
            height:100xp; 
            padding: 100px; 
    } 
    </style> 
    </head>
<body>
<h1>包含选择器</h1>
 <h2>选择所有被父元素包含的子元素。</h2>
  <div>
  <img src="imgs/avatar5.png" /> 
  </div>
   <img src="imgs/avatar5.png" /> 
   </body> </html>

在这里插入图片描述

周超&.

关注

0
点赞
踩
0

收藏

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

**CSS 基础**1. 什么是 CSS?CSS-Cascading Style Sheet [层叠样式表]是用于(增强)控制网页[html]样式并允许将样式信息与网页内容分离的一种标记性语言.2.CSS 的作用?给网页[html]的元素/标记/标签设置样式的。可以让 HTML 网页变得好看3.在 HTML 网页中如何使用 CSS?1.内联定义 (Inline Styles) 内联定义即是在[html]的元素/标记/标签的内部使用对象的 style 属性定义适用其的样式...
复制链接

扫一扫