正文

css基础入门

讲明白  2022-02-13  247

关键词：

CSS基础入门

一、CSS介绍和引用

1、CSS概述

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

2、CSS的基础语法

css规则主要由两个主要部分构成
- 选择器
- 以及一条或多条声明
选择器通常是您需要改变样式的HTML元素
每条声明由一个属性和值组成
属性(property)是您希望设置的样式属性(style attribue)，每个属性由一个值，属性和值被冒号分开。

/*选择器选择h1标签*/
h1{
    /*一条颜色的声明*/
    color:red; /*属性：color 值：red*/
    font-size:14px;
}

3、CSS引入方法：

1、外联式：在head中通过link标签，链接带外部样式表到页面中

<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="../css/home_page.css" type="text/css">
</head>

2、嵌入式：通过style标签，在网页上创建嵌入的样式表

<head>
    <meta charset="UTF-8">
    <title>嵌入式</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 10px;
            background: #154FB5;
        }
    </style>
</head>

3、内联式：通过标签的style属性，直接给标签设置样式

<body>
    <div style="background: #154FB5; width: 100px">........</div>
</body>

二、CSS背景样式

颜色对照地址：http://tool.oschina.net/commons?type=3

1、设置背景色

background-color： 设置背景颜色，这个属性接收任何合法的颜色值
四种种颜色表达：
- 颜色英文
- ＃号颜色：#E9F1F9
- rgb(177,222,333) 三个值锁定一个颜色
- rgba(177,222,333,0.2) 第四个为0-1的范围，表示透明度

body, html {
    background-color: red;
    background-color: #E9F1F9;
    background-color: rgb(177,222,333);
    background-color: rgba(177,222,333,0.4);
   
}

2、设置背景图像

background-image： 要把图像放入背景，属性默认值为none，表示背景没有放置任何图像，如果需要设置一个背景图像，必须为这个属性设置一个URL值：

背景图平铺
- 如果要对页面上背景图片进行平铺么可以使用background-repeat属性

属性值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

background-image:url("img/bd_logo1.png");
background-repeat: no-repeat;

3、背景定位

可以利用background-position改变图像的位置

关键字
百分比
像素

属性	描述
top left top center top right center left center center center right bottom left bottom center bottom right	如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。
x% y%	第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值

background-position: 50% 25%;
background-position: 100px 100px;
background-position: top center;

4、背景关联

如果文档比较长，那么当文档向下滚动时，背景图形就会消失，此时设置background-attachment 就可以声明图像对于可视区固定，不受滚带影响

-可能的值

值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承 background-attachment 属性的设置。

background-color: #154FB5;  /* 颜色*/
background-image:url("img/bd_logo1.png");/* 图像*/
background-repeat: no-repeat; /* 图像不平铺*/
background-position: top center; /* 图像定位*/
background-attachment: fixed; /* 图像不移动*/

5、通过background 属性一次将背景

背景颜色
背景图像
图像属性
图像位置
图像显示

/*任意顺序都可，单独设置颜色和图片也可以*/
body,html{
        background: #154FB5 url("img/bd_logo1.png") no-repeat top center fixed;
        }

三、CSS文本样式

1、常用的文本样式

color: 设置字体颜色
- color:red;
font-size：设置文字的大小
- font-size:14px;
font-family：设置文字的字体
- font-family: 宋体;
font-style：设置字体是否斜体
- font-style: italic; 斜体
- font-style: normal; 不斜体
font-weight：设置字体是否加粗
- font-weight: bold; 加粗
- font-weight: normal; 不加粗
line-height：设置字体的行高
- line-height: 40px;
font: 字体的样式属性一起设置
- 顺序
  - font-style
  - font-weight
  - font-size/line-height
  - font-family
- 案例
  - font: italic bold 28px/40px "微软雅黑";
  - font: 28px/40px "微软雅黑";
text-indent：设置首行缩进
- text-indent: 50px; 缩进50个像素
text-align：设置文字水平对齐方式
- text-align: center; 水平居中

四、CSS选择器

1、常见选择器

标签选择器
- 通过标签名选择标签给标签设置样式
- div{}
id选择器
- ID选择器，通过#号加标签id来选择
- #id{}
类选则器
- 通过点加类名选择
- .classname{}
属性选择器
- 通过标签名+元素属性进行选择
- div[属性名]
层级选择器
- 主要应用在父元素下的子元素
- div div{}： div下面的div标签
组选择器
- 多个选择器，每个选择器直接用逗号隔开
- div ,#id,.classname{}
伪类选择器
- 在支持CSS的游览器中，链接不同状态都可以不同的显示，这些状态包括：
  - 活动状态
  - 已被访问状态
  - 未被访问状态
  - 和鼠标选题状态
- 具体使用点击跳转w3school

五、CSS模型框

CSS 框模型 (Box Model)规定了元素框处理元素内容、内边距、边框和外边距的方式。

见图片盒子模型

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

1、边框

元素的边框 (border)是围绕元素内容和内边距的一条或多条线。border属性允许你规定元素边框的样式、宽度和颜色。
border-style d的默认值是none，因此如果希望边框出现，必须声明一个边框的样式

属性	描述
border	简写属性，四个边框属性一起设置
border-style	简写属性，用于设置元素所有边框的样式，或者单独为各边设置样式
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独为各边设置款第
border-color	简写属性，设置元素所有边框中可见部分的颜色，或者单独为各边设置颜色

border的样式类型

solid 实线
dotted 点线
dashed 线
double 双线

div{
     border: solid 2px #154FB5;
    }

1、内边距

padding 属性定义元素边框与元素内容之间的空白区域

CSS内边距属性

属性	描述
padding	简写属性，作用在一个声明中，设置元素的所有内边距
padding-top	设置元素上边距
padding-right	设置元素右边距
padding-bottom	设置元素下边距
padding-left	设置元素左边距

一般通过padding四边内边距一起设置

值	描述
auto	浏览器计算内边距。
length	规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的内边距。
inherit	规定应该从父元素继承内边距。

元素各边边距右10px
- div{padding: 10px;}
对称设置上下相等，左右相等
- div{padding: 10px 30px ;}
四边一起设置，属性从上开始顺时针旋转
- padding: top rigth bittom left;

2、外边距

1、margin(外边距)属性：定义元素周围的空间

2、margin属性接受任何长度单位、百分数值甚至负值

3、magin塌陷（和并）

边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

六、浮动和定位

1、CSS定位机制

css有三种基本的定位机制：普通流、浮动、绝对定位

除非专门指定，否则所有框都在普通流中定位，也就是说，普通刘中的元素的位置由元素在HTML中的位置决定

块级框从上到下一个接一个地排列，乱搞之间的垂直距离由框的垂直外边距计算出来

通常使用position 属性,我们可以选择不同的定位方式

2、相对定位：relative

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间，因此，移动元素会导致它覆盖其他框。

如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

#box_relative {
  position: relative; //相对定位模式
  left: 30px;
  top: 20px;
}

3、绝对定位：absolute

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

因为绝对定位的框与文档流无关，所以它可以覆盖页面上的其他元素，可以通过设置z-index属性来控制这些框的堆放次序

注意: 绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块(也就body)。

<html>
<head>
<style type="text/css">
img{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img src="/i/eg_smile.gif" />
<p>由于图像的 z-index 是 -1，因此它在文本的后面出现。</p>
</body>
</html>

4、浮动：float

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

可能的值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置
inherit	规定应该从父元素继承 float 属性的值。

css入门课程css基础

...网页内容与外观分离利于维护，提供工作效率 css语法基础css语法：选择符+申明，其中申明是指属性-值形式，注意css样式区分大小写css使用方式1）行内样式查看详情

css入门基础基础语法规则

基础语法规则CSS规则由两个主要的部分构成：1.选择器:通常是需要改变样式的HTML元素2.一条或多条声明：由一个属性和一个值组成。每个属性有一个值。属性和值被冒号分开。选择器：分组：用逗号可以将需要分组的选择器分开... 查看详情

h5.css入门2.css基础

CSS基础学习目标1、CSS简介2、CSS语法3、样式的创建4、两种引入外部样式表的区别5、样式表的优先级和作用域6、CSS选择器7、选择器的权重8、浮动属性的简单应用9、HTML、CSS注释一、CSS简介英文全名：cascadingstylesheets(百度百科)===c... 查看详情

学起来——css入门基础

Hello,大家好！小女来更博啦！CSS福利送上~~~首先给大家介绍一下CSS到底是什么？一、CSS概念 W3C规范中，要求有三条：一为“两个分离”，二为语言遵循语义化，三为代码书写规范性。其中要求的第一条“两... 查看详情

css基础入门d1

模块回顾1.CSS的引入2.CSS选择器3.常用文本样式一、CSS的引入引言：HTML可以标记页面文档中的段落、标题、表格、链接等的格式，但随着网络发展，用户需求增加，尤其是互动式的情景需求，HTML越来越不能满足更多文档样式的需... 查看详情

css学习之一——css基础入门

一、css写法内联：在dom标签上的style属性中直接书写。外联：在css文件中书写，通过link引入。页内：在style标签中书写。二、选择器1.分类标签/元素选择器：body{};p{};类选择器：.style1{};.style2{}id选择器：#id1{};#id2{}通配符选择器：*... 查看详情

html中css入门基础

&n 查看详情

less入门及基础学习（建议有css基础）

本文整理自：Less：优雅的写css代码原文写的很好，也很清晰，本文为个人整理方便个人对知识进行汇总整理！（个人建议原地址博文）css是不能够定义变量的，也不能嵌套。它没有编程语言的特性。在项目开发中，常常发现有... 查看详情

css基础入门d2

模块回顾1.背景图片的设置2.超链接伪类一、背景图片的设置1.整个页面的背景图片插入在类标签body中直接插入，例如：body{background-image:url(../Day02-HTML/html/海贼王02.jpg);}还可以调试它的效果，是否重复，是否随页面滚动，调动位... 查看详情

幕客前端基础入门-css文本样式

网页中内容元素主要有文字、图片、视频所构成。作为主要内容之一的文字，我们如何设置网页中文字的展示效果，让网页更加美观，让读者对网页的信息更加关注和易于阅读，这就是需要使用css字体和文本样式属性进行文字的... 查看详情

幕客前端基础入门-css文本样式

1html+div+css零基础快速入门到制作企业站视频课程_20css样式作业

1、HTML+DIV+CSS零基础快速入门到制作企业站视频课程_20css样式作业 1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>css样式作业</title>6<style>7*{8font 查看详情

javascript基础快速入门

HTML,CSS和JavaScript是网页设计的基础。HTML和CSS定义了静态的效果，而JavaScript则可以体现出一些动态的效果。在已经掌握一种或者多种编程语言的基础下，学习JS很容易，下面看看一些基本的使用方法。1.JavaScript的位置。和CSS类似... 查看详情

css基础

CSS基础目录CSS基础1.什么是CSS2.发展史3.快速入门基本入门CSS的优势4.CSS的三种导入方式1.什么是CSSCascadingStyleSheet层叠级联样式表CSS：表现层（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动...2.发展... 查看详情

less基础入门

　　平时在工作中,偶尔会遇到老大让你修改原来写好的样式,如果修改的多的话,修改起来是非常麻烦的.他不像js一样,定义变量、函数,需要修改某些值,直接修改方法就行了。less的出现,恰恰帮我们解决了这个问题在这呢,我们简要... 查看详情

reactjs入门基础

渲染这俩字可能在很多地方都见过。但可能不太理解是啥意思。那么首先我们来理解一下渲染。渲染我觉得这样理解比较通俗。我们做一个汽车，开始是没有喷漆的（没有css）只是些框框架架（HTML标签）。那么网页加载就是首... 查看详情

css样式快速入门

#CSS样式快速入门##前言前端基础的博客主要分为HTML、CSS和JavaScript,本类博客主要用于记录博主的学习过程和分享学习经验，由于博主学识浅薄，经验不足，难免会出现错误，欢迎大家提出问题。注：前端基础的文章参考于b站up主... 查看详情

1html+div+css零基础快速入门到制作企业站视频课程_22实战：div+css企业站-头部

1、HTML+DIV+CSS零基础快速入门到制作企业站视频课程_22实战：div+css企业站-头部 .html 1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>企业首页</title>6< 查看详情