一、CSS的基础
一、css简介
1.1 什么是css
网页分为三部分:结构（html）表现（css）行为（js）css:层叠样式表网页实质上是一个多层的结构，通过CSS来分别为网页的分一层设置样式，而最终我们看到的是网页的最上一层。1.2 css的性质
CSS的性质：层叠性 、继承性
1）层叠性
层叠性：后来添加的css样式会覆盖原有的样式。即根据选择器的权重值进行覆盖。样式具有层叠性。2）继承性
样式的继承：我们为一个元素设置了样式，同时也会应用到他的后代元素。【继承是发生在祖先和后代之间】1.继承的设置是为了方便我们的开发。利用继承，我们可以将一些通用的样式设置到共同的祖先元素上。这样只需设置一次即可，让所有的元素都具有该样式。2.基本上关于文字的样式都有继承性。但并不是所有的样式都会继承。比如：背景相关、布局相关的等样式都不会被继承。 body{color:white;font-size:14px;}
>>>>>> 继承
从案例可知，p元素中的子元素都继承了字体颜色
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>
head><style>p{color:red; }style>
<body><p>我是P元素<span>我是p元素中的span元素<small>我是span元素中的small元素small>span>p>body>
html>
>>>>>> 并不是所有的元素都具有继承性
与背景相关、布局相关等样式都不会被继承。p元素设置了背景颜色，不会被其子元素继承。但是由于元素默认的背景样式为透明，所以才会有下面的样式。
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>
head><style>p{background-color:red; }style>
<body><p>我是P元素<span>我是p元素中的span元素<small>我是span元素中的small元素small>span>p>body>
html>
二、css的基础
2.1 css的引入方式
1）行内式（只能用于本标签中，复用性较差，不推荐使用）
<p stype="color:red;font-size:40px;">少小离家老大回</p>注意：开发时不推荐使用。由于css与html代码耦合性太高，维护比较麻烦。
2）内嵌式（只能用于本页面中，复用性不强）
<style type="text/css">p{color:red;} </style>注意：style标签写在head里。
3）外链式
外链式引入外部css文件。有两种方式。方式一： 使用link标签引入外部样式文件:p{color:blue;font-size: 30px;font-weight: bold;}引入外部样式:<link type="text/css" rel="stylesheet" href=“./js.js” />方式二： 使用style标签引入引入外部样式:<style type="text/css" >@import url("1.css") ;</style>
2.2 css注释
+++ css注释：注释的内容会自动被浏览器忽略！<style>/* css 注释*/ style>+++ html注释 <!---注释内容--\>
2.3 css基本语法
css基本语法：选择器 声明块选择器:通过选择器可以选中页面中的元素。声明块：通过声明块来为指定要为元素设置的样式。声明块是由一个一个声明组成。声明由键值对形式：键：值; DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Documenttitle><style>p{color:red;}style>head><body><p >少小离家老大回p>body>html>
三、CSS单位
3.1 像素的单位
1）像素和百分比的概念
像素1.屏幕显示器实质由一个一个发光的小点构成。（每一个点展现出不同的颜色，构成了我们的屏幕）这些正方形的小点我们称之为像素。2.不同屏幕的像素大小是不同。像素越小，显示的图片越清晰。（像素越小，展示的图片越细腻）3.不同屏幕的像素大小是不同。所以200px在不同的显示屏展示效果是不同的。（例如：200px在我的电脑是10cm。但是如果在高清屏上显示，则可能是5cm）4.200px 表示200个小点。由于点的大小在不同屏幕上会不同，所以展示效果也不同。案例：
百分比:1.也可以将属性值设置为相对于父元素的百分比。2.设置百分比，可以使子元素根据父元素的改变而改变。DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>
head><style>#b1{width:100px;height:100px;background-color: red;;}#b2{width:50%;height: 50%;background-color: blue;;}style>
<body><div id="b1"><div id="b2">div>div>body>
html>
2）像素单位 px、em 和 rem
px1px代表一个像素。 em1.em是相对于元素自身的字体大小来计算的。2.1em=1font-sizefont-size的默认值为16px。所以10em = 10*16px=160px3.em会根据元素字体大小的改变而改变。 rem1.rem是相对于根元素的字体大小来计算的。2.根元素就是html元素。3）注意事项
>>>>>> em是根据元素自身的字体大小来计算的
em是根据元素自身的字体大小来计算的。所以修改font-size的大小，元素的大小也会改变。DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>
head><style>#b1{font-size:16px;width:10em;height:10em;background-color: red;;}style>
<body><div id="b1">div>body>
html>
>>>>>> rem是相对于根元素的字体大小来计算的。
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>
head><style>html{font-size:20px;}#b1{font-size:15px;width:10rem;height:10rem;background-color: red;;}style>
<body><div id="b1">div>body>
html>
3.2 颜色单位
1）颜色单词、rgb、rgba、十六进制rgb
颜色单位：1.在css中可以直接使用英文名来指定颜色。如：white 、black 、red 、blue 、green ...2.rgb值1.rgb通过三种不同的颜色的浓度来调配出不同的颜色 。2.r:红色 g：绿色 b：蓝色3.每一种颜色的范围都在0-255（0%-100%）之间4.语法:rgb（255,255,255）rgb（100%,100%,100%）5.光的三原色调配:rgb（0,0,0） 黑色rgb（255,255,255） 白色3.rgba值1.rgba就是rgb的基础上增加了一个a,表示不透明度。2.需要四个值，前三个和rgb一样，第四个表示不透明度（0-1之间）。1 表示完全不透明0 表示完全透明.5 表示半透明3.语法:rgba（255,255,255,.3）rgba（255,255,255,0）4.十六进制的rgb值1.语法: #红色绿色蓝色rgb:#00aa1f rgb:#ff0000 2.颜色浓度范围:00-ff3.如果颜色两位两位重复，可以简写。如： #aabbcc --> #abc如：rgb:#00aa11 ---> rgb:#0a1 5.HSL值、HSLA值1. H 色相（0-360）S 饱和度（0%-100%）L 亮度（0%-100%）2.hsl(50,100%,50%)2）案例
>>>>>> 英语单词表示颜色
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>
head><style>#b1{width:50px;height:50px;background-color: red;;}style>
<body><div id="b1">div>body>
html>
>>>>>> rgb、rgba
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>
head><style>#b1{width:50px;height:50px;background-color: rgb(0,250,250)}#b2{width:50px;height:50px;background-color: rgba(0,250,250,0.521)}style>
<body><div id="b1">div><div id="b2">div>body>
html>
>>>>>> 十六进制rgb
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>
head><style>#b1{width:50px;height:50px;background-color: #00ff11;}#b2{width:50px;height:50px;background-color: #11ffaa;}style>
<body><div id="b1">div><div id="b2">div>body>
html>
>>>>>> hsl 和hsla
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>
head><style>#b1{width:50px;height:50px;background-color:hsl(50,50%,50%)}#b2{width:50px;height:50px;background-color:hsla(50,50%,50%,0.251)}style>
<body><div id="b1">div><div id="b2">div>body>
html>
四、清除浏览器的默认样式
通常情况下，浏览器都会为元素设置一些默认样式。默认样式会影响到页面布局，通常我们会去除默认样式。
*{margin:0px;padding:0px;list-style:none;}本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！