CSS学习

最新推荐文章于 2024-11-11 18:20:16 发布

Duuuuuuuuty

最新推荐文章于 2024-11-11 18:20:16 发布

阅读量109

点赞数

文章标签： css 学习 html

本文链接：https://blog.csdn.net/m0_68938691/article/details/128412125

版权

CSS是用于控制网页样式的语言，包括字体、颜色、布局等。它通过选择器来定位页面元素，如ID选择器、类选择器和标签选择器。CSS的三种导入方式包括link、内联和导入语句。选择器的优先级为ID>类>标签。文章还介绍了如何美化网页元素，如文字样式、阴影、超链接和渐变，以及盒子模型、浮动和定位的概念，帮助初学者快速入门。

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

什么是CSS（可以去网页：菜鸟教程学习）

css是什么
css怎么用（快速入门）
css选择器（重点+难点）
美化网页（文字，阴影，超链接，列表，渐变。。。）
盒子模型
浮动
定位
网页动画（特效效果）

1.1什么是css

Cascading Style Sheet 层叠级联样式表
CSS：表现（美化网页）
字体，颜色，编剧，高度，宽度，背景图片，网页定位，网页浮动…

在这里插入图片描述

1.2css的发展史

1.3 快速入门

规范命名文件

在这里插入图片描述

建议使用这种规范

在这里插入图片描述

css优势：

内容和表现分离
网页结构表现统一，可以实现共用
样式十分的丰富
建议使用独立于html的css文件
利于SEO，容易被搜索引擎收录

1.4css的三种导入方式（主要掌握link，最实用）

行类： h1 style=“color:red” h1
link
import

2.选择器（优先级：id选择器>class类选择器>h，p标签选择器）

作用：选择页面上的某一个或者某一列元素

2.1基本选择器

基本选择器I（标题选择器h1这样的）格式: h{} h
类选择器 class 格式 .。。。 h class=“”

可以多个标签归类（可以复用，也可以跨类进行）
Id选择器（不能复用，id要唯一）格式： #。。。h1 id=“…”

2.2 层次选择器

在这里插入图片描述

后代选择器：在某个元素的后面（多代）。。。。。。

  <style>
      body p{
  background:red;
  }
  </style>

子选择器，一代（子代）。。。>。。。


  <style>
      body>p{
  background:red;
  }
  </style>

相邻兄弟选择器（同辈）（指向不是本身，而是同辈的下一个）

  <style>
      .active + p{
  background:red;
  }
  </style>

在这里插入图片描述

通用选择器（同辈向下，而且自己不反应）当前选中元素向下的所有同辈元素

  <style>
      .active~p{
  background:red;
  }
  </style>

在这里插入图片描述

2.3结构伪类选择器

在这里插入图片描述

2.3.1这个是特例

<!DOCTYPE html>
  <style>
    ul li:first-child{
    background:red;

    }
    ul li:last-child{
    background:red}
  </style>

2.3.2选中p类父类的第几个（p的父类是body，然后选中body的第几个（h和p不分但是不会选中h））

  <style>
    p:nth-child(2){
    background:red;}
  </style>

2.3.3选中父类的第几个某个类型的元素（自动选择p而不选择h）

  <style>
    p:nth-of-type(2){
    background:red;}
  </style>

2.4属性选择器 id+class结合

= 绝对等于
*= 包含这个元素的
^= 以这个开头的
$= 以这个结尾的

<p class="demo">
  <a href="http://www.baidu.com" class="links item first" id="first">1</a>
  <a href="" class="links item active" target="_blank" title="test">2</a>
  <a href="images/123.html" class="links item">3</a>
  <a href="images/123.png" class="links item">4</a>
  <a href="images/123.jpg" class="links item">5</a>
  <a href="abc"class="links item">6</a>
  <a href="/.pdf"class="links item">7</a>
  <a href="/adc.pdf"class="links item">8</a>
  <a href="abc.doc"class="links item">9</a>
  <a href="abcd.doc"class="links item last">10</a>
</p>

选择id等于first的

    a[id=first]{
        background:yellow;}

选择class中含有links的

  <style>

    a[class*=links]{
        background:yellow;}

  </style>

选择href里面以http开头的

<style>

    a[href^=http]{
        background:yellow;}

  </style>

选择以com结尾的

  <style>

    a[href$=com]{
        background:yellow;}

  </style>

3.美化网页元素

3.1为什么要美化网页

有效的传递页面信息
美化网页，页面漂亮才能吸引用户
凸显页面的主题
提高用户体验

3.2字体样式

在这里插入图片描述

3.3文本样式

颜色
有rgb和rgba，a是调节透明度的，a的范围是0-1，越小透明度越高
文本对齐方式
文本居中

center也可以改成right和left表示放到哪边
首行缩进
行高

line-height用来表示容器的高度，height用来表示这一容器内的每行文字的高度。
装饰下划线，中划线，上划线

文字和图片水平对其（需要对图片和文字分别标签，然后对其）

去掉a标签的下划线（a标签自带下划线）

在这里插入图片描述

3.4阴影

在这里插入图片描述

3.5超链接伪类

正常情况下
在这里插入图片描述

3.6列表

在这里插入图片描述

3.7背景（x是在水平平铺，y是在竖直平铺，no-repeat就是不重复，只显示一个背景图片）

在这里插入图片描述

3.8渐变

网上可以找到对应图片的代码

4.盒子模型

在这里插入图片描述

4.1什么是盒子

margin：外边距
padding：内边距
border：边框

4.2边框

边框的粗细border
边框的样式（实线，虚线）solid
边框的颜色red

4.3内外边距

margin：0 auto；（0表示上下边距为0，auto左右自动对其）（先是上，再是右，再是下，再是左，顺时针旋转）
在这里插入图片描述

1.（0默认是上下左右）
2.（0 1px默认是上下为0，左右为1）
3.（分别是上右下左）

4.4圆角边框

4个角
在这里插入图片描述
可以根据width和height调节然后调节border-radius，调出自己想要的对应的+

4.5阴影

图片居中

在这里插入图片描述

5.1浮动

float：左右；浮动起来

5.2display

display：inline-block;（效果是把非块的放在一排）

5.3 解决放到一个框里面的问题

在这里插入图片描述
1.定义对应的高度宽度
2.如果几个图都在一个框里面。可以把他们全部放在一个div然后再最后一个div定义一个空的div然后clear:both;

3.在父级元素中增加一个 overflow:hidden;(不要定义父级的高度，直接在父级里面定义overflow:hidden)
4.
在这里插入图片描述
小结：