CSS——CSS基础(一篇就够用)_css基础(一篇就够用)-程序员宅基地

技术标签: css  笔记  前端  sass  less  css3  

CSS——CSS基础(一篇就够用)

一.CSS概述

1.什么是css

  css:cascading style sheets
           层叠       样式     表

2.作用

  html:搭建网页的结构,承载页面的数据
  css:美化页面,修饰标签 (亚洲4大邪术)

3.css和html属性的使用原则

  html的属性只对当前标签有效,没有可重用性,导致没有可维护性
  css 具备一定的代码重用性,提高了可维护性
  但是css没有把重用性做到极致。使用scss可以做到极致
  W3C建议使用css替代html属性,如果css无法替代的属性,就使用html属性就可以了

二.CSS语法规范

1.css的使用方式

  每个样式属性之间用分号连接,例:
  color:red; 字体颜色
  background-color:yellow; 背景颜色
  font-size: 50px; 字号大小

①行内样式,内联样式

  在元素中,写style属性,在style属性中编写样式
  <元素 style="样式声明;样式声明....."></元素>

<p style="color:red;background-color:yellow;font-size: 50px;">

只对当前元素生效,代码没有可重用性
内联样式默认优先级最高
内联样式只在学习和测试中使用,项目基本不用

②内部样式

在head标签中,编写style标签,在style标签内部,编写属性
选择器{样式声明;样式声明…}
选择器:定义页面中使用这个样式的元素条件

p{
    
 color:purple;
 background-color: pink;
}

只能在当前页面中使用,项目中使用较少,
学习和测试使用较多

③外部样式

创建一个.css文件,在html中的head标签里,使用link引入

<link rel="stylesheet" href="my.css"/>

  必须有rel=“stylesheet”,代表当前文件和引入文件的关系
  项目中大量使用

2.css的样式特性

①继承性

  文本样式和字体样式的继承
  绝大多数文本字体样式,可以被继承
  a标签不会继承字体颜色

②堆叠性

  为一个标签定义多个样式规则
  如果样式属性不冲突,都会作用到这个标签上

③优先级

  默认优先级
  高 内联样式
  中 内部样式,外部样式-------就近原则
  低 浏览器默认样式
  f12关于优先级的显示
  默认情况下,f12中样式是按照默认优先级顺序从上往下显示

④调整优先级

设置最高优先级 !important,比内联都高
写在某一个值与分号之间,!important与值之间有空格
color: red !important ;
注意,内联样式不允许设置!important,语义要求

三.基础选择器

选择器,规范了页面中哪些元素能够使用当前设置的样式
就是一个条件,符合这个条件的元素都可以使用这个样式

1.通用选择器

{样式声明} (匹配所有元素,但是的效率非常低,不建议使用)
例:*{margin:0;padding:0}

2.元素选择器

标签关键字{样式声明;}
div{} p{}

3.ID选择器

<元素 id=“id值”>
#id值{样式声明}
id在一个页面中不能重复,所有id选择器只被一个元素应用

4.类选择器

使用.定义样式,哪个元素想用,用class都能调用
<元素 class=“类名”>
.类名{样式声明}

类选择器的其它用法
①.多类选择器

<元素 class="类名1 类名2 类名3.......">

②.分类选择器

元素选择器.类选择器{样式声明}
.类选择器.类选择器{样式声明}
.tooltip.show{}

③.类名的定义规范

  ①必须有.
  ②不能以数字开头
  ③只能包含- 或者_
 v④尽量见名知意

5.群组选择器

选择器1,选择器2,选择器3.....{样式声明} #d1,.c1,div,p.c2{color:red;background-color:yellow}

6.后代选择器

通过元素的后代关系,来匹配元素
后代关系:一层嵌套或者多于一层嵌套称为后代
选择器1 选择器2 选择器3{样式声明}

7.子代选择器

通过元素子代关系,来匹配元素
子代关系,一层嵌套为子代
选择器1>选择器2>选择器3{样式声明}
子代和后代选择器可以混合使用
#d1>p span{color:red;}

8.伪类选择器

匹配元素在某一个状态时的样式
只适用于a标签的伪类
①未被访问:link a:link{color:red}
②已被访问:visited a:visited{color:green}
所有元素都能用的伪类
:hover 鼠标悬停的状态
:active 激活状态
:focus 元素获取焦点时的状态(input button)

9. 选择器权值

  选择器权值,代表选择器的重要程度
  重要程度高,优先显示
  !import >1000
  内联样式 1000
  id选择器 100
  类选择器 10
  伪类选择器 10
  元素选择器 1
  通用选择器 0
  继承的样式 无
权值的特点

  1. 当一个选择器中含有多个选择器时,需要将所有的选择器权值进行相加值最大的显示
  2. 有多个选择器的权值一样大,按照就近原则
  3. 添加了!important当前css样式直接获取最高优先级
  4. 群组选择器,不相加,个算个的
  5. 选择器权值的计算,不会超过本选择器权值的最大数量级

四.尺寸和边框

1.尺寸

width: 
height: 
取值:1.px为单位的数字,rem 
	 2.% 但是如果设置高度,当前元素的父元素是body,%失效 
min-width 
max-width 
min-height 
max-height 

2.页面中允许设置尺寸的元素有哪些

具备属性,width和height的元素,都能设置宽高(img,table,td)

块级元素 行内元素 行内块(input/button)
设置宽高有效 设置宽高无效 设置宽高有效
默认宽,父元素100%
默认高靠内容撑开
宽高靠内容撑开 浏览器默认设置一个宽高
不同浏览器给的宽高不同。
一般要写兼容,css reset

3.溢出处理

overflow:visible; 溢出部分显示,默认值 
overflow:hidden;溢出部分隐藏 
overflow:scroll; 带滚动条,不管是否溢出,都添加x/y轴的滚动条 
overflow:auto; 自动, 不溢出就没有滚动条,溢出自动在溢出方向添加滚动条 
overflow-x:scroll; 单独让x轴出现滚动条 
overflow-y:scroll; 单独让y轴出现滚动条

4.边框

①边框的简写方式
同时设置4个方向的边框 
border: width style color; 
width- - - - 边框的粗细 
style - - - -边框样式 solid 实线 
					dotted 小圆点虚线 
					dashed 短线虚线 
					doubel 双实线 
color - - - -合法颜色,transparent 
取消边框 border:none / 0 ; 
最简方式 border: style; border:solid;
②单边的设置
border-top: 20px solid #f00; 
border-right: 20px dotted #00f; 
border-bottom: 20px dashed #0ff; 
border-left: 20px double #f0f; 
取消某个边框 
border-top: 0; 
border-right: 0; 
border-bottom: 0; 
border-left:0;
③单属性设置
border-width: 100px; 
border-style: solid; 
border-color: #CCFF00;
④单边单属性
border-top-width:  上边框宽度
border-top-style:  上边框样式
border-top-color:  上边框颜色
border-right-width: 
border-right-style: 
border-right-color: 
border-bottom-width: 
border-bottom-style: 
border-bottom-color: 
border-left-width: 
border-left-style: 
border-left-color:

5.边框的倒角(圆角)

把直角倒成圆角 
border-radius:圆角的半径 
取值:1.px为单位的数字 
	 2.% 50%就是圆 
单角的定义,圆角之间会相互影响 
border-top-right-radius:; 
border-bottom-right-radius:; 
border-top-left-radius:; 
border-bottom-left-radius:;

6.元素阴影

box-shadow: h-shadow v-shadow blur spread color; 
h-shadow x轴偏移量 
v-shadow y轴偏移量 
blur 阴影模糊程度 
spread 阴影大小 
color 阴影颜色 
inset 内部阴影

7.轮廓

  多用于修饰文本框和按钮
  绘制于边框外部一圈线条,不占页面空间
  一般我们会把轮廓清除掉

outline:width style color; 
outline:0; 

五.盒子模型

默认盒子模型计算公式:
元素占地宽度:
左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距
元素占地高度:
上外边距+上边框+上内边距+内容区域高度+下内边距+下边框+下外边距

1.外边距 margin

①语法:
margin:v1; 同时设置4个方向外边距 
margin-top: 
margin-right: 
margin-bottom: 
margin-left: 

取值:

  1. px为单位的数字
  2. % 上右下左都是父元素宽的百分比
  3. auto 上下外边距无效 让块级元素本身在当前父元素内水平居中
②简写方式:
margin:v1; 同时设置4个方向 
margin:v1 v2; v1为上下 v2为左右 
margin:v1 v2 v3; v1上 v2左右 v3下 
margin:v1 v2 v3 v4; 上 右 下 左 123
③margin自我冲突

  左右冲突,以左为准
  默认布局的元素:不要用右外边距设置元素的水平位移,用左外边距设置位移
  右外边距值负责控制当前元素与后面元素的距离

2.外边距的特殊情况

①外边距的合并

  两个垂直边距相遇时,会合并成一个,值以大的为准
解决方案:

  1. 只写一个元素的上边距,或者另一个元素的下外边距
  2. 页面设计的时候规避
②完整的块级元素、行内元素、行内块的总结
块级元素 行内元素 行内块
设置宽高有效 设置宽高无效 设置宽高有效
默认宽:父元素%100
默认高:靠内容撑开
宽高靠内容撑开 浏览器默认设置一个宽高
4个方向外边距都有效 上下外边距无效 4个方向外边距都有效
改变行内块上外边距
行内块会带着同一行的其他行内元素/行内块一起位移
③默认自带外边距的元素

  p , h1~h6 , ul , ol
  body 4个方向8px
  ul 上下外边距16px 左内边距40px

④外边距溢出

在特殊情况下,子元素的上外边距会作用到父元素上
特殊情况

  1. 父元素没有上边框
  2. 子元素内容区域的上沿与父元素内容区域的上沿重合
    解决方案
  3. 给父元素上上边框,增加了父元素的实际占地高度
  4. 给父元素添加上内边距,增加了父元素的实际占地高度
  5. 给父元素设置overflow:hidden/auto, 如果想溢出显示,就不行了
  6. 给父元素添加一个大儿子,一个空

3.内边距 padding

①语法
padding:v1; 
padding:v1 v2; 
padding:v1 v2 v3; 
padding:v1 v2 v3 v4; 
padding-top; 
padding-right; 
padding-bottom; 
padding-left; 

取值:

  1. px为单位的数字
  2. % 父元素宽度的百分比
  3. 内边距不能设置auto

4.设置盒子模型的计算方式

box-sizing:
content-box默认值,设置的width为内容区域宽度
   左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距
border-box 设置的width包含(左边框+左内边距+内容区域+右内边距+右边框)
   左外边距+width+右外边距
width设置百分比的时候,一般使用border-box比较好控制

六.背景

1.背景颜色

background-color : 合法颜色值; 背景颜色 
background-image : url(img/02.png); 背景图片 
background-repeat: repeat; 背景图片的平铺 
					no-repeat 不平铺 
					repeat-x 设置x轴平铺 
					repeat-y 设置y轴平铺

2.背景图片的定位

background-position: 

取值:

  1. x y 分别设置x轴和y轴
    以px为单位的数字
    关键字 x:left/center/right y:top/center/bottom
  2. 一个值 只设置x轴,y轴默认居中
background-size: 

取值:

  1. 两个值设置宽高 px为单位的数字
  2. 一个值同时设置宽高
  3. contain 图片根据元素尺寸自动等比缩放,正好全部显示图片
  4. cover 图片根据元素尺寸自动等比缩放,正好把元素铺满

3.简写方式

background:color img repeat position;

简写方式没有size。size需要单写

4.最简方式

background:color / img;

七.渐变

1.线性渐变

background-image: linear-gradient(方向,色标1,色标2……);

取值:方向

  1. 写终点
to top
to right
to bottom
to left
  1. 写角度
    0deg

色标
   颜色+位置

  1. %
  2. px
  3. 不写位置只写颜色

2.径向渐变

background-image: radial-gradient(半径 at 圆心x 圆心y,色标1,色标2…….);

取值
圆心

  1. px为单位的数字
  2. %
  3. 关键字 X:left/center/right Y:top/center/bottom

色标
位置为%,是半径长度的%

3.重复渐变

background-image: repeating-radial-gradient(100px at centercenter,#000 0%,#0ff 2%);

4.线性渐变的浏览器兼容问题

-webkit- chrome safari
-o- 欧朋浏览器
-moz- 火狐浏览器
-ms- IE浏览器

八.文本格式化

1.字体属性

字体大小

 font-size: px 、rem 、 pt 

字体系列

font-family:系列1,系列2,…… 

字体加粗

font-weight: lighter 300 normal 400 bold 600 bolder 700 

字体样式

font-style:normal 没样式 
				italic 斜体 

小型大写字母

font-variant: small-caps;

字体的简写方式

font: style variant weight size fmily; 一定按照顺序写 
font: italic small-caps bold 36px "mv boli"; 

最简方式

font:size family;

2.文本属性

文本颜色 color:
文本的堆砌方式

text-align:left; 左对齐 
				right 右对齐 
				center 居中
 				justify 两端对齐

text-align:center 的细节 : 让内部的文本、行内、行内块水平居中 内部块级元素会继承,但不会让块级元素居中
margin:0 auto; 让当前块级元素水平居中
line-height垂直对齐方式——行高
一般会把行高设置为容器高度,让文本在容器中垂直居中
取值
line-height:

  1. px为单位的数字
  2. 无单位的数字,代表字号的倍数
    一般只对一行文本设置行高,设置多行文本使用内边距算!!!
    文本线条修饰
text-decoration:underline; 下划线 
				overline 上划线 
				none 删除所有线条 
				line-through 删除线 

首行缩进

text-indent: px为单位的数字 

文本阴影

text-shadow:h-shadow v-shadow blur color;

九.表格的样式

1.表格的常用样式

table
   尺寸、边框、背景、文本、内外边距都有效
td/th
   高度正常使用,宽度靠内容撑
   边框、背景、文本、内边距都有效 外边距无效

2.表格的专属样式

td/th属性
   vertical-align:top/middle/bottom
   设置td/th中文本的垂直对齐方式
table的属性

  1. 边框合并
border-collapse:separate; 默认值,边框分离状态 
				collapse 边框合并 
  1. 边框之间的距离,前提边框处于分离状态
border-spacing:20px; 
  1. 边框标题
caption-side:top; 标题在表格上面 
			bottom 标题在表格下面

4.设置表格显示规则

表格自动布局(默认布局) 表格的固定布局
table-layout:auto table-layout: fixed;
单元格尺寸会自动适应内容 单元格大小取决设置的尺寸
比较灵活 表格不够灵活
表格越大,加载速度越慢 任何情况,加载速度都快
适用于不确定每列大小并且不复杂的表格 适用于确定每列大小的表格

十.浮动定位

float:none; 默认值,不浮动 
	  left 左浮动 
	  right 右浮动 

右浮动必须使用margin-right进行位移
没有定义宽度的元素,脱离文档流之后,宽度靠内容撑开
元素一旦脱离文档流,会变成块级元素
清除浮动带来的影响

clear:left; 清除左浮带来的影响 
	  right 清除右浮带来的影响 
	  both 同时清除左右浮动的影响

解决高度坍塌

  1. 给父元素设置高度(适合元素较少的情况下)
  2. 给父元素也设置浮动(会影响父元素的兄弟元素以及父元素的父元素,完全不能用
  3. overflow:hidden/auto;(不能溢出显示了)
  4. 给父元素添加一个空的块级元素当做小儿子,并给小儿子设置clear:both;

十一.其他重要样式属性

1.显示方式

display:block; 让元素按照块级元素去显示 
display:inline; 让元素按照行内元素去显示 
display:inline-block; 让元素按照行内块方式显示 
display:table; 让元素按照表格的方式显示 
display:none; 隐藏,脱离文档流的隐藏

2.显示效果

visibility:visible; 默认值,显示 
visibility:hidden; 隐藏,不脱离文档流的隐藏 

visibility:hidden;和display:none;的区别
    visibility:hidden是不脱离文档流的隐藏
    display:none是脱离文档流的隐藏

3.透明度

opacity:0.5; 取值0~1 0全透明,1不透明
opacity和rgba的区别
     rgba只改变当前颜色的透明度
     opacity元素以及元素后代所有与颜色相关的都会变透明

4.垂直对齐方式

vertical-align:
使用场合
 ①表格th/td
   控制内部内容垂直对齐方式 top/middle/bottom
 ②行内块
   控制行内块前后行内元素、行内块元素、文本的垂直对齐方式
   top/middle/bottom 默认值middle
 ③img
   控制img和前后行内元素、行内块元素、文本的垂直对齐方式
   top/middle/bottom/baseline 默认值 baseline基线

5.光标的管理

设置属性之后,会直接调用操作系统的默认光标

cursor:default; 默认值 小箭头 
cursor:pointer; 小手 
cursor:text; 提示文本输入 的 I 
cursor:wait; 等待加载 
cursor:help; 帮助 
cursor:crosshair; 十字

6.列表的样式

list-style-type:disc; 实心圆 
				square; 实心小方块 
				circle;空心圆 
				none; 去除列表标识项 
list-style-image: 
list-style-position:outside; 默认值,在li外侧显示列表标示 
					inside; 在li中显示列表标识 

简写方式

list-style:type URL position; 
list-style:none; 最简方式,清除列表标识项

十二.定位

相对定位、绝对定位、固定定位
position:static 默认值 默认文档流
relative 相对定位
absolute 绝对定位
fixed 固定定位
注意:元素一旦设置了position,并且取值为relative/absolute/fixde其中一种时

  1. 这个元素被称为已定位元素
  2. 解锁四个方向的定位属性:top / right / bottom / left
    左右冲突以left为准
  3. 会解锁堆叠属性z-imdex

1.相对定位

position:relative; 配合偏移属性
不脱离文档流,不影响周围元素
如果一个元素设置了相对定位,并且不写偏移属性,这个元素对页面没有任何影响
如何偏移:相对自己原先位置偏移
使用场合:
  ①做元素位置的微调
  ②作为绝对定位的祖先级已定位元素

2.绝对定位

position:absolute;配合偏移属性
绝对定位,脱离文档流
如何偏移:
  ①如果元素没有已定位的祖先元素,绝对定位元素相对body左上角进行偏移
  ②以“最近的”“已定位的”“祖先级”元素左上角做偏移,子绝父相
使用场合:页面布局中使用,可以让页面移动到页面的任何位置

3.固定定位

position:fixed; 配合偏移属性
如何偏移:相对于body左上角
使用场合:把元素永远固定在页面可视区域的一个位置

4.堆叠顺序

z-index:
注意事项

  1. HTML代码中后写的元素堆叠顺序高
  2. z-index:默认值大于0小于1
  3. 浮动在第几层 小于0 大于-1
  4. 只有已定位的元素才能设置堆叠
  5. 堆叠顺序对父子级元素无效,儿子永远压着父亲
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_47511959/article/details/118152956

智能推荐

web应用托管_自托管的免费发票应用-FusionInvoice-程序员宅基地

文章浏览阅读438次。web应用托管Note that around the exact time of this article’s publication, FusionInvoice 2 was released as commercial software, and is based on Laravel instead of CodeIgniter like previous versions. It is,..._]fusion怎么处理电子(非纸质)发票?

react 组件添加样式_如何通过4个简单的步骤将CSS模块样式表添加到React组件-程序员宅基地

文章浏览阅读252次。react 组件添加样式Let’s say you’d like to add a CSS Modules Stylesheet to your project. You can find Create React App’s guidance here, but essentially — and as the guidance states — CSS Modules let you use ..._react在自定义的组件上增加样式类

如何在Google和其他高科技公司获得软件工程师职位-程序员宅基地

文章浏览阅读510次。by YK Sugi 由YK Sugi 如何在Google和其他高科技公司获得软件工程师职位 (How to Get a Software Engineer Job at Google and Other Top Tech Companies)Hi everyone! 嗨,大家好! I’ve already talked about how I personally got a softw..._获得谷歌的软件工程师职位英语

steam密码查看_如何查看和清除Steam中的先前别名-程序员宅基地

文章浏览阅读3.5k次。steam密码查看Steam lets you set your name to anything within its terms of service. This can make it difficult to find people—even if they’re already on your friends list. Find out who’s who by checking al..._steam密码查看

spark和java类型转化时报错:Caused by: java.lang.ClassCastException: scala.collection.mutable_scala.collection.mutable.wrappedarray$ofref is not-程序员宅基地

文章浏览阅读1.3k次。错误:Caused by: java.lang.ClassCastException: scala.collection.mutable.WrappedArray$ofRef cannot be cast to java.util.List分析:这个问题,一般是在sparksql中做row转换时候出错,最好一步步排错。这里要说的是, row:Row是先做了一次强制类型转换(asInstanceOf),row的实际类型是Seq[T],但是不能用Array[T],否则就会出现各种scala和java的类_scala.collection.mutable.wrappedarray$ofref is not a valid external type for

kconfig_对自己的项目使用kconfig-程序员宅基地

文章浏览阅读1.3k次。kconfig 介绍 (Intro)Every Linux professional write scripts. Someеimes light, linear. Sometimes complex script with functions and libs(yes, you can write your bash-library for use in other scripts). 每个..._kconfig 应用程序

随便推点

excel批量制作条形码_如何在Microsoft Excel中制作条形图-程序员宅基地

文章浏览阅读1.5k次。excel批量制作条形码A bar chart (or a bar graph) is one of the easiest ways to present your data in Excel, where horizontal bars are used to compare data values. Here’s how to make and format bar charts in Mi..._excle chartbar add number

EMNLP 2020 可解释性推理-程序员宅基地

文章浏览阅读1.1k次。引言点击下面卡片,关注我呀,每天给你送来AI技术干货!来自:复旦DISC目前在各种推理任务中,预训练模型都取得了不错的效果,展现了一定的隐式推理能力,然而大多数工作的推理过程还是不透明的。..._向量表示推理的推理方法赋予可解释性

golang 转换为字符串_在Golang中,如何将错误转换为字符串?-程序员宅基地

文章浏览阅读2.8k次,点赞2次,收藏2次。golang 转换为字符串In Golang, fmt.Println(err) can print out the error err. But how to convert an error to a string explicitely? 在Golang中, fmt.Println(err)可以打印出错误 err 。 但是如何将错误显式转换为字符串 ? In Go, the error t..._golang中错误转换为字符串的方法

解决正在等待响应_解决一些等待问题-程序员宅基地

文章浏览阅读4k次。解决正在等待响应 背景 (Background) On occasion, I’ll see waits that exceed what I expect well above normal and a few of them have some architecture and standards to consider following when troubleshooting, ..._正在等待某某某的响应

outlook邮件恢复字体_如何更改Outlook 2013中邮件列表中使用的字体大小-程序员宅基地

文章浏览阅读2.1k次。outlook邮件恢复字体Outlook 2013 allows you to customize the font used to display the sender’s name, subject, date received, and size of each message in your message list. Maybe you want to just change the s..._how to change the font size of outlook

使用django-social-auth获取用户数据-程序员宅基地

文章浏览阅读285次。Recently we had to add support for social networks login to an application we are developing and we chose django-social-auth to work with. It is a well documented and easy to use django application fo..._django social auth