CSS(一)基础

最新推荐文章于 2022-12-09 21:51:09 发布
最新推荐文章于 2022-12-09 21:51:09 发布
阅读量253 收藏 1
点赞数 1
分类专栏： 网页制作
本文为博主原创文章，转载请在显著位置标明本文出处以及作者网名，未经作者允许不得用于商业目的。
本文链接：https://blog.csdn.net/asacmxjc/article/details/116398649
版权

css

为什么使用CSS样式表？

  1. 样式表能实现内容与样式的分离，方便团队开发，形成内容与样式和谐统一的完整网页
  2. 样式复用、方便网站的后期维护，同一网站共用同一样式，确保网站统一的风格
  3. 页面的精确控制，实现精美、复杂页面

CSS的用途

  1. 外观、美化
    在这里插入图片描述
  2. 布局、定位
    在这里插入图片描述

CSS基本语法

<head>
<style type="text/css">  /*<style>标签声明标签内为CSS*/
    选择器（即修饰对象）{
    /*
    多条样式规则
1.多个属性间用分号分隔
2.用冒号声明对应属性值
    */
    对象的属性1: 属性值1; 
    对象的属性2: 属性值2;
  }
</style>
</head>

一、选择器的分类

  1. 标签选择器
/*
标签选择器：用于修饰同类HTML标签的共性风格,作用范围是全局;
记住标签(li)是可变的^_^;
标签选择器直接应用于HTML标签;
*/
<style type="text/css">
   li {
     color:red; 
     font-size:30px;
     font-family:黑体; 
   }
</style>
  1. 类选择器
 /*  类选择器 可在页面中多次使用
 定义样式，注意类名有点号
*/
    .red {
        color: red;
    }

<!-- class=""只要是在标签（任何个）内即可 
应用类样式，其他元素也可以使用
 -->
<li class="red">家用电器</li>
  1. ID选择器
 /* ID选择器 同一个页面只能用一次*/
    #gray {
        background: lightgray;      /*设置背景色*/
    }

二、应用样式的方式

1. 内部样式表

HTML和CSS在同一文件，方便开发时修改，样式和内容分离不够彻底，不利于页面复用

<head>
<style type="text/css">
  …..  //样式定义 
</style >
</head>
2. 外部样式表（建议采用）

分别定义*.css和*.html文件，样式和内容彻底分离，多个网页可共享同一CSS

CSS代码保存在扩展名为.css的样式表中
.blue{color:blue;}  
…..  //CSS样式定义
HTML文件引用扩展名为.css的样式表，有两种方式

（1）链接式（常用）

<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

(2) 导入式

<head>
……
<style type="text/css">

@import url("style.css");

</style>
</head>

注：二者的区别

<link/>标签属于XHTML，@import是属于CSS2.1
使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文     
    件加载到网页当中
@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就       
   是无效的。
3.行内样式表

单独定义某个元素的样式，灵活方便。但因为内容与样式混写在一起，应尽量少用或不用

<li>
  <a href=""#" style="color:red;font-size:10px;">日用百货</a>
</li>

三、CSS的复合选择器

1.后代选择器（常用）

在CSS选择器中通过嵌套的方式，对特殊位置的HTML标签进行声明

外层的标签写在前面，内层的标签写在后面，之间用空格分隔

标签嵌套时，内层的标签成为外层标签的后代；

不只是两个，可以多个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
    /* 选择的是多层标签共同控制的内容 */  
   p .lala {
    color:blue;
   }
   
</style>
</head>
<body>
    <p>
       啦啦啦啦
       <span class="lala">后代选择器</span>
    </p>
</body>
</html>
2.交集选择器

由两个选择器直接连接构成，选中二者各自元素范围的交集

第一个必须是标签选择器，第二个必须是类选择器或者ID选择器

选择器之间不能有空格，必须连续书写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
    
/* 选择是p标签元素里的且是类名为txt的元素*/
   p.txt {
    color:red;
   }
   
</style>
</head>
<body>
    <p class="txt">交集选择器</p>
</body>
</html>
3.并集选择器

多个选择器通过逗号连接而成

利用并集选择器同时声明风格相同样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">

  h2,.one,.two ,#three {      并集选择器
    color:blue;
 } 

</style>
</head>
<body>
   <h3>庭院深深深几许，杨柳堆烟，帘幕无重数。</h3>
   <p class="one">玉勒雕鞍游冶处，楼高不见章台路。</p>
   <p class="two">雨横风狂三月幕，门掩黄昏，无计留春住。</p>
   <p id="three">泪眼问花花不语，乱红飞过秋千去。</p> -->
</body>
</html>

四、其他

1.通配符选择器

特点

  1. 设置页面中所有标签为统一的样式
  2. 通配符选择器选中的是所有标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">

* {          通配符选择器(一般用于初始化，加载速度慢)
    color:red;
 }
 
</style>
</head>
<body>
    ....
</body>
</html>
2.多类名（类选择器）

可以给一个标签指定多个类名，从而达到更多的选择目的。

<div class="red font20">亚瑟</div>

在标签class 属性中写 多个类名
多个类名中间必须用空格分开
这个标签就可以分别具有这些类名的样式

五、CSS的高级选择器

1.层次选择器

层次选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>层次选择器</title>
    <style type="text/css">

  /* 层次选择器 */
/* p{
    border:1px solid red;  给元素设置边框,1px是边框的宽度,
    solid是边框的样式 (solid:实线,dotted:点线,dashed:虚线,
    double:双线),red是边框的颜色

} */

/* 后代的 */
/* body p{
   background:red;   背景色`
} */


/* 子选择  E>F 选择匹配的F元素，
且匹配的F元素是匹配的E元素的子元素 */
p>a {
    background:red;
}


/* 相邻兄弟   E+F 选择匹配的F元素，
且匹配的F元素紧位于匹配的E元素后面*/
/* .demo+p {
     background:red;
} */


/* 通用兄弟   E~F 选择匹配的F元素，
且位于匹配的E元素后的所有匹配的F元素*/
/* .demo~p {
     background:red;
} */

</style>
</head>
<body>
   <!--     <h1>00</h1>
 -->     <!-- 缩写语法  p{$}*10+ul>li*3>p{$@11} -->
    <p>1</p>
    <p class="demo">2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>
      <a href="#">啦啦啦</a>
     </p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <ul>
        <li>
            <p>11</p>
        </li>
        <li>
            <p>12</p>
        </li>
        <li>
            <p>13</p>
        </li>
    </ul>

</body>
</html>
后代选择器和子选择器的区别
子选择器仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。
而后代选择器是作用于所有子后代元素。
后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
2.结构伪类选择器

结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>css的高级选择器</title>
    <style type="text/css">

       /* 结构伪类选择器 */

       /* 第一个 */
/*
       body>p:first-child {
        background:red;
       } */

        /* 最后一个 */
      /*  p:last-child {
        background:red;
       } */



       /* 指定位置 */
      /*  body>p:nth-child(10) {
            background: red;
       } */

    /* odd奇数位置  even偶数位置 */
     /*   body>p:nth-child(even) {
        background:red;
    } */


 /*     body>p:first-of-type {
        background:red;
    }
 */

     /* body>p:last-of-type {
        background:red;
    } */


/*        body>p:nth-of-type(4) {
        background:red;
    }

    body>p:nth-child(1) {
            background: red;
        } */
</style>
</head>
<body>
<!--     <h1>00</h1>
 -->     <!-- 缩写语法  p{$}*10+ul>li*3>p{$@11} -->
    <p>1</p>
    <p class="demo">2</p>
    <p>
      <a href="#">啦啦啦</a>
     </p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <ul>
        <li>
            <p>11</p>
        </li>
        <li>
            <p>12</p>
        </li>
        <li>
            <p>13</p>
        </li>
    </ul>
</body>
</html>

注：使用E F:nth-child(n)和E F:nth-of-type(n)的 区别：

E F:nth-child(n)在父级里从一个元素开始查找，不分类型
E F:nth-of-type(n)在父级里先看类型，再看位置
:first-child()和 :first-of-type()的区别

3.属性选择器

在这里插入图片描述

六、CSS的三大特性

1.层叠性

标签必须使用同一类型的选择器，最后定义的样式会 将前面定义的样式冲突部分覆盖掉。
（长江后浪推前浪，前浪死在沙滩上。）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>css的三大特性</title>

    <style type="text/css">
    /* 重叠性 */
   div {
        color:red;
}

    div {
        color:blue;
} 

 
</style>

</head>
<body>
     <div>
 层叠性-标签必须使用同一类型的选择器，最后定义的样式会  
 将前面定义的样式冲突部分覆盖掉。（长江后浪推前浪，前浪死在沙滩上。）
    </div> 

</body>
</html>
2.继承性

继承性必须在嵌套结构中才会有；
该子元素标签会受父元素样式影响（子承父业；
继承性属性总结：
✔能被继承的属性：
1. color 2.text-，font-，line-这些元素开头的
X不能被继承的属性：
1. width 2. height 3. background

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>css的三大特性</title>

    <style type="text/css">


  /* 继承性 */
   div {
    color:blue;
    font-size:100px;
    text-decoration:underline;   /*下划线*/
    line-height: 80px;         /*行高*/

    /*不能继承*/
    background:#666;
    width:800px;
    height:700px;
  } 

  

</style>

</head>
<body>
   <div>
    <p>
继承性-该子元素标签会受父元素样式影响（子承父业）
</p>
</div> 

</body>
</html>
3.优先级
总结：
 1.  优先级是使用了不同的选择器给同一个标签设置样式
 2.  权重叠加
 3.  继承的权重是0
 4. 从左到右，左面的最大，一级大于一级，数位之间没有进制，
    级别之间不可超越

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>css的三大特性</title>

    <style type="text/css">
   
  /* 优先级 行内样式（style) > id选择器 > 类选择器 > 标签选择器*/

   div {
    color: blue!important;    !important 将优先级提到最高
   }

   .demo {
    color: yellow;
   }
   #test {
    color:lightpink;
   } 

/* 复合选择器 权重叠加的问题*/
/* 权重为1 */
/* li {
    color:blue;
} */
/* 权重为 2 */
/* ul li {
    color:lightpink;
} */
/* 权重为 11 *//*
.nav li {
    color:red;
} */

/* 继承权重为0 */
 /* .nav {
    color:blue;
 }
 li {
    color:gold;
 } */

.nav li {
    color:red;
}
.nav .pink {
    color:pink;
}

</style>

</head>
<body>
 
 <div class="demo" id="test" style="color: red">
优先级-优先级是使用了不同的选择器给同一个标签设置样式、权重叠加
</div> 

<ul class="nav">
    <li class="pink">通配符和继承权重为0</li>
    <li>标签选择器为1</li>
    <li>类(伪类)选择器为 10</li>
    <li>id选择器 100</li>
    <li>行内样式表为 1000</li>
    <li>!important 无穷大</li>
</ul>
</body>
</html>

另外：改变无序列表ul-li的样式

li {
    display:inline-block;   ul横向排列
    float: left;
    list-style: none;    去掉ul-li黑点
}
float: left;
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，
使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至
下一行，这个过程会持续到某一行拥有足够的空间为止。

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。
HHppGo
关注
专栏目录
ACM CSS 2017.7z
06-25
自己用到的2017年的ACM CCS全年的论文集，希望有用到的能够帮助到。
css样式入门练习以及style分离
最新发布
m0_53753920的博客
03-20 216
1. css全称： Cascarding Style Sheet 层叠级联样式表。CSS可以美化网页，颜色，字体，边距，高度等。2. style可以编写css的代码语法，代码格式： 选择器{ 声明1；声明2}， 每一个声明用分号结尾。
如何生成ACM论文中的 CCS Concepts?
RaySunWHUT
02-14 6530
如何生成ACM论文中的 CCS Concepts?
CSS巧妙实现分隔线的几种方法
Wancc123的博客
08-02 4888
实际效果 1.单个标签实现分隔线 HTML部分代码如下所示 <div class="line_01">小小分隔线 单标签实现</div> CSS部分代码如下 .line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: 200px solid #ddd; border-right: 200px solid #ddd; text-alig
ACM官网开发
qq_28329203的博客
08-21 382
## 一.介绍 本系统设计并实现了基于.net的ACM官网开发。该官网的功能包括主页设计、博文管理，用户管理，登录界面，管理员界面，对用户资料进行编辑等，实现了简易的网站架构，有了基础的网站模式。本系统使用ASP.NET及html+css技术，后台使用SQL数据。 ## 二.实现功能 ![image-20210820104759662](C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20210820104759662.
css 入门基础教程
09-25
总的来说，CSS入门基础教程涵盖了基本语法、选择器、注释和不同类型的样式表，这些都是学习CSS的基础。掌握这些知识后，可以进一步学习更复杂的布局技巧、响应式设计、动画和过渡效果，以及CSS预处理器等进阶主题。
CSS，CSS3基础
11-05
**CSS与CSS3基础知识概述** CSS（层叠样式表）是一种用于描述网页及应用程序用户界面外观和表现的样式语言。它是Web开发中的关键技术之一，与HTML或XML（包括SVG、MathML等）配合使用，为网页添加样式和布局。CSS3...
css基础教学1
08-03
CSS基础教学1 CSS是 Cascading Style Sheets 的缩写，译为层叠样式表，是一种用于描述网页样式的语言。CSS主要用于控制网页的布局、颜色、字体、背景等各种样式元素。 在本教程中，我们将学习如何使用CSS对...
Css基础 （一）.doc
04-30
Css 基础知识点汇总 Css 基础知识点汇总是 Css 知识点的集合，包括 Css 语法、选择器的类型和种类、如何调用 Css，以及 Css 中的一些属性设置。以下是 Css 基础知识点的详细解释： 一、Css 概念 Css 指层叠样式表...
CSS+DIV设计基础
05-03
DIV+CSS是WEB设计标准，它是一种网页的布局方法。...XHTML是一种在HTML（标准通用标记语言的子集）基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。
计算机安全全球顶级会议研究梳理：DeFi 与安全
qq_32193015的博客
10-24 502
计算机安全全球顶级会议研究梳理：DeFi 与安全
css样式的分离与合并
weixin_33777877的博客
08-24 677
2019独角兽企业重金招聘Python工程师标准>>> ...
css 代码分割
Luckyzhoufangbing的博客
10-19 468
（一）现象 index.css div { width: 300px; height: 300px; background-color: red; } index.js import './index.css' console.log('1') 页面： 然后 npm run build <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &.
CSS——CSS样式的几种写法
weixin_56226042的博客
10-19 5233
CSS概念：Cascading Style Sheet，简称为css，中文名称层叠样式表或者级联样式表，主要指的是用来装饰HTML页面的一种技术。 在页面开发的时候，一般CSS有如下几种写法： -->在标签的属性style中编写 -->在页面中的style标签中编写 -->在页面外的XX.css文件中编写，使用link标签引入 -->使用@import导入需要的css文件 一、行内样式 行内样式，又叫做标签样式，主要是写在标签的style属性上，好处是优先级别较高，坏
CSS样式分离
03-18 2023
引导语：     举个例子，依照现在主流的写法，下截图所示的灰色背景的框框命名与样式可能如下： .topic_edit_box{display:inline-block; border:1px solid#ddd; background:#f7f7f7; padding:20px 40px;} 如果您有强烈的分离意识，尤其在大型的项目中，这段样式可能会是这个样子（注意命名
HTML+CSS基础题
weixin_46132649的博客
12-09 2695
HTML+CSS基础题
CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言
efsfgfgffgf的专栏
04-24 5709
CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。 2CSS id
为什么要将html页面和样式表分离,0031 如何使用css文件对网页内容和样式进行分离...
weixin_35308269的博客
06-04 946
原标题：0031 如何使用css文件对网页内容和样式进行分离上节课，学习了针对文字可以设置很多种样式。这节课，学习如何将内容和样式进行分离。上节课的课后练习1.将斜体字体效果去除2.将工作经历和工作经验(部分)这2行文字也做成简介这行文字的效果完成代码如下： 页面效果如下： 可以看到3个标题都是一样的效果了。但是，在编写代码的时候，发现一个问题，就是3个div的代码是一模一样的，复制起来很长，而且...
jquery创建a_如何使用jQuery创建游戏
cuketao5066的博客
08-04 413
jquery创建aHow to create a game using jQuery Today we are making a simple puzzle game called “Fifteen”. The purpose of the game is to slide 15 square blocks around to form an image. The goal of this tut...
XHTML与CSS基础知识入门指南
本篇教程是关于XHTML与CSS基础知识的教学，旨在为有一定HTML和CSS基础的网页开发者提供一个从表格布局向Web标准（div+css）过渡的学习路径。对于初次接触网页制作的新手，需要具备基本的网页基础知识，包括了解表格...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

HHppGo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值