css学习

已于 2023-07-12 21:01:47 修改
阅读量114 收藏
点赞数
文章标签： css 学习 前端
于 2023-07-12 01:25:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71774042/article/details/131650736
版权

一、css几大模块：

选择器 盒模型 背景和边框 2D/3D 动画 用户界面 多列布局 文字效果

二、选择器

  • 简单选择器：

id选择器#id
类选择器.classname
元素选择器元素名
组合选择器元素名，元素名

  • 伪类选择器（用来选择某元素的指定状态，像获得焦点，鼠标移动到上面等，以链接<a>为例）(部分)

a:link   选中链接还未被访问的状态
a:visited选中链接已经被访问的状态
a:hover选中当鼠标移动到a元素上
a:active选中当鼠标按下将访问而未访问之时
注意hover必须放在link和visited之后才能起效，active必须放在hover之后

  • 伪元素选择器（用来选择块类元素中的具体内容，进行内容上的样式变化）(全部)

元素名::after在元素之后（插入内容等）
元素名::before在元素之前
元素名::first-line选中元素的首行
元素名::first-letter选中元素的首字母
元素名::selection选中被用户选中的部分

  • 组合器选择器（用来选择跟元素相关联的元素，如父子关系，兄弟关系等）

元素1   元素2选中元素1的所有元素2（只要是元素2就行，无限下沿至后代）
元素1 > 元素2选中元素1下面一层的所有元素2（仅下沿一层）
元素1 + 元素2选中元素1后（外面），跟其最近的一个元素2
元素1 ~ 元素2选中元素1后（外面），所有的元素2

  • 属性选择器（用来根据一些都具有的属性，对元素进行选择）

[属性名]选择所有设置了该属性的元素
[属性名=value]选择所有该属性设置为value的元素
[属性名*=value]选择所有该属性的值中包含又value的元素
[属性名~=value]选择所有该属性值中有value一词的元素，跟上面的区别，该是单词，例如value是flover而实际是floverer则无法匹配，若是flover my 则匹配成功。
[属性名^=value]或者[属性名|=value]选择该属性的开头是value的元素
[属性名$=value]选中该属性的值的最后是value的元素

三、css的使用三种方式和优先级

  • 外部引入（在link标签中的href定义外部css地址）
  1. 需要两个属性：rel 和 href
<head>
<!--外部链接-->
<link rel="stylesheet" href="../css/shiyan.css">
<meta charset="UTF-8">
<title>css练习</title>
</head>
  • 内部使用（在head中使用<style>标签）
<head>
  <style>
  #box1 {
 border: 2px solid red;
 border-radius: 20px;
}

  </style>

</head>
  •  行内引用(利用每个元素自带的style属性，直接在value中编写css代码即可）
<div id="box1" style=" border:solid green;
 border-radius: 20px 30px;
 padding:10px 20px;
 width: 300px;">
<p>冲天香阵透长安，满城尽带黄金甲。</p>
</div>

三种方式优先级:行内样式优先级最高，其次是外链样式和内部样式（根据先后顺序来定） 最后是浏览器默认样式

四、css颜色指定的三种方式

  • 直接根据颜色名称指定
  1. 常用的颜色名称有：yellow blue red  gray（灰） green
  • 根据三基色占比来（HEX）
  1. rgb（x1,x2,x3)  x的值从左到右分别代表红色 绿色 蓝色，值的范围是0到255。
  2. #aabbcc  用十六进制表示三色，最大值是ff 最小值是00。
  • 根据透明度亮度等设置（hsl)

   h是代表色轮上的度数，0代表红色 120绿色  240蓝色

  s代表饱和度（0～100%）为0时是灰色阴影，为100时是全色

   l代表亮度（0～100%）为0时是黑色，100时是白色

  a 代表透明度（0～1） 为0时是完全透明，1是不透明。

五、css背景

  （一）概要：

主要学习五大内容：背景颜色 background-color 背景图片 background-image 背景重复background-repeat  背景附着 background-attachment  背景定位 background-position

   (二）学习

  • 背景颜色 background-color

根据上面所讲的颜色定义如下编写即可

div {
 width: 200px;
 height: 200px;
 background-color: hsla(240,50%,50%,0.5);
}
  • 背景图片 background-image

           背景图片默认重复铺满整个元素。

div {
 width: 200px;
 height: 200px;
 /*指定背景图像*/
 background-image: url("../imgs/3.jpeg");

}
  • 背景重复 background-repeat
  1. 三个值：repeat-x 仅横向重复  repeat-y 仅纵向重复 no-repeat 不重复
  • 背景定位 background-position

两种定位方式

  1. background-position: 12px,23px; 相对于元素左上角的横向距离和纵向距离。
  2. background-position: left top;   直接用语言代替（一共有五个词，top bottom center left right)两两组合使用，本例是左上。
  • 背景附着 background-attachment
  1. background-attachment: fixed 指定背景图像不会随着元素移动而移动，视觉上一直呈现在视觉上固定位置。（通俗来讲，当窗口小时，滑动滚轮，背景图像会一直呈现在眼前）
  2. background-attachment: scroll; 指定背景图像随着元素动而动。通俗来讲就是，滚轮滑走，会把背景图像滑倒上面，视觉上看不到了。
  • 简写背景属性，按照顺序即可，不要求全部指定，顺序如下：
  1. background: color image repeat attachment position; 使用safari浏览器测试简写失效

六、css边框

  (一）主要内容：

 边框类型 border-style 边框宽度 border-width 边框颜色 border-color 圆角边框 border-radius

(二）学习

  • border-style 共有这几种类型：点状 dotted 虚线 dashed 实线 solid 双线边框 double 槽状 groove  垄状 ridge 3d外边框 outset 3d内边框 inset 隐藏边框 hidden 无边框 none
  • border-width 设置边框的宽度
  • border-color： 设置边框颜色
  • border-radius：跟像素值 设置圆角边框

（三）细节

  1. 边框类型 颜色 宽度可以简写为 border：宽度 类型 颜色;
  2. 例子，下面是对img加上点状边框，宽度设置为20px ，圆角边框，边框颜色为红色。
 #img1{
 border-style: dotted;
 border-width: 20px;
 border-color: green;
 border-radius: 20px;
 }

 图片来源于网络，侵权删。

3.也可以通过border-top-style：dotted 来对单独一条边框设置。

七、cssn边距和宽高（margin、padding、width、height）

  • 外边距合并现象的几种情况，及存在意义。

  1. 当两个块元素相邻上下排列是，二者的外边距会自动合并为外边距较大者。
  2. 当一个块级元素被另一个块级元素包围时，包含块元素的上下外边距与被包含的块级元素的外边距也会发生合并（前提是包含元素没有内边距，被包含元素没有边框把外边距隔开）。
  3. 块级元素自身的外边距也会发生合并现象（没有内容，上下外边距合并）。
  4. 块级元素外边距合并的意义：像p这个元素如果没有外边距合并，那么第一段话的上间隔就会和第二段和第一段的间隔小（不一样）

  • 外边距的使用，较为简单。

  1. 共有 margin-top|bottom|left|right  这几个属性，属性值为px|inherit(继承父元素的外边距)|%(按包含元素的外边距的百分比设置)|cm。
  2. 也可简写为margin：四个值｜两个值 ｜一个值   分别代表上右下左外边距｜上下，左右｜上下左右都是这一个值。

  • 内边距的使用，较为简单，属性值类型跟外边距一致

  1. padding-top|right|bottom|left: 34px; 指定某一方向外边距大小，也可简写：padding: top right bottom left
  • 宽高设置很简单不做赘述（其设置的是除外边距，内边距，边框外的其他内容的宽度和高度）
  1. width|min-width|max-height|height|max-width|min-height.
  • 盒模型

 

八、css轮廓（位于边框外，用于突出元素，并不占用元素尺寸，可与其他元素重合）

不属于结构体的一部分。  

outline-style

规定轮廓类型:dotted dashed double solid groove ridge outset inset none hidden
outline-color设置轮廓的颜色
outline-width设置轮廓的宽度
outline-offset设置轮廓的偏移量，偏移量越大，轮廓和边框之间的空隙越大
outlineoutline的简写属性:width style color

九、 文本和字体

（一）文本

  • 文本颜色和文本对齐
属性值细节
colorrgb #十六进制等若制定文字颜色一定要配合背景颜色使用（background-color)
text-alignright  left  center  justify

文本对齐方式，

分别是右对齐，左对齐，居中对齐，两端对齐

directionltr  rtl指定文本显示方向，从左到右，从右到左。
unicode-bidibidi-override

反转文本每个字符，

与direction配合使用可以达到，改变句子方向的效果。

vertical-aligntop middle bottom设置垂直对齐方式，靠上对齐，居中对齐，靠下对齐
  • 文本装饰与文本转换
text-decoration描述text-transform描述
text-decoration: none用来去除文本样式，如去除链接默认的下划线text-transform:uppercase把文本转换成大写
text-decoration：overline给文本加上上划线text-transform:lowercase把文本转换成小写
text-decoration: line-through给文本加上删除线text-transform:capitalize把单词首字母转换为大写
text-decoration:underline给文本加上下划线
  • 文字间距与文字阴影
属性值描述
text-indentpx值设置第一行的缩进
letter-spacingpx值设置字符之间的间隔大小
line-heightpx值设置行与行之间的距离
word-spacingpx值设置单词和单词之间的距离
white-spacenowrap设置空白的处理方式
text-shadowpx值 和 颜色

text-shadow:px1,px2,px3,颜色。

从左往右分别代表，x轴阴影大小，

y轴阴影大小，阴影模糊程度，

阴影颜色。

(二) 文字

  • 字体族、字体样式、字体大小
属性值描述
font-family(字体族)Serif|Sans-serif|monospace|Cursive|fantasy五种通用字体类型，一般放在字体族的最后保底，分别是：衬线字体，无衬线字体、等宽字体、草书字体、幻想字体
font-sizepx em vw用来规定字体的大小，分别是像素，16px等于1em，视口宽度（1视口宽度等于1%的窗口宽度）
font-stylenormal|italic用来指定字体的样式，普通样式，斜体显示
font-weightnormal|bold设置字体粗细，正常，加粗
font-variantnormal|small-caps指定是否将小写字母转化为小型大写字母
  1. 衬线字体会在每个笔画中加入细节，更优雅；无衬线没有细节，但更方便阅读；等宽字体类似机器字体，很板正；草书字体，模仿人类书写笔迹；幻想字体更艺术，更活泼，更个性；
  2. 视口宽度值，当字体大小设置为视口宽度做单位的值时，字体大小会随着浏览器窗口宽度大小来调整字体大小，1vw为当前窗口宽度的1%。
  3. em作单位时，是所有浏览器都允许用户改变字体大小。
  • 谷歌字体
  1. 如果我们不满足于五种基本字体，也可以使用谷歌开源字体，只需要加入link标签，引入css文件即可。
<!--引入谷歌的sofia字体css文件-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
p {
font-family:"Sofia","Sans-serif"
}
</style>
  • 简写字体属性：font: style variant weight size family 按照该顺序，size和family属性必须有。

十、css图标和列表

（一）图标

  • 使用
  1. 需要用到图标库（Font Awesome）官网：fontawesome.com。
  2. 暂时搁置。

（二）列表

  • css对有序和无序列表前面图标的控制
  1. list-style-type: square|cricle 对于无序列表而言，设置标记为空心圆形或者实心方形。
  2. list-style-type: upper-roman|lower-alpha 对于有序列表而言，设置标记为罗马计数或者小写数字。
  3. list-style-image: url("图像地址") 用图像来作为列表项的标志。
  4. list-style-position: outside|inside 定义列表项标记的位置：在文本外，与项垂直对齐（默认），在项内，会推开文本。
  5. list-style-type: none 删除列表项前面的标记。
  6. list-style: type position image     简写属性。

（三）表格

  • 用在table上的属性：border（边框）border-collapse:collapse; 将表格内边框设置为单一边框，默认内边框是双边框，极难看。 height设置表格高度
  • 用在th和td上 height 设置单元格高，即行高。 padding设置单元格与内边距 border-bottom 加上分割线
  • text-align|vertical-align等文本属性都可以用到<th>和<td>中，来设置表格中字体的样式和对齐方式。
  • 也可以使用伪类选择器：hover实现鼠标移动到<tr>上背景颜色发生变化（结合js使用）
湫鹤椿水
关注
路恩CSS学习助手
07-07
路恩CSS学习助手，可快速查找css1、css2、css3全部属性和值，并配有每个属性和值的简要说明；对CSS语法规则和CSS选择器也做了详细介绍；并内置了CSS布局向导式学习教程。可以把本软件看作是一个CSS词典和CSS教程软件...
html+css学习.zip
01-01
html+css学习html+css学习html+css学习html+css学习html+css学习 html+css学习html+css学习html+css学习html+css学习html+css学习 html+css学习html+css学习html+css学习html+css学习html+css学习 html+css学习...
CSS学习
m0_55471400的博客
06-27 1593
css全称：层叠样式表用来美化页面。
CSS学习心得
weixin_47223561的博客
03-30 2095
CSS一、CSS简介二、CSS语法1.id 选择器2.class 选择器三、CSS的应用1、外部样式表2、内部样式表3、内联样式四、颜色、尺寸、对齐五、CSS文档分析1、盒子模型2、边框与边距3、定位4、溢出 overflow5、浮动 float6、不透明度7、组合选择器总结 一、CSS简介 CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而CSS样式定义如何显示html元素。其涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是
HTML+CSS学习总结
weixin_53351919的博客
06-26 2890
html+css学习总结
CSS入门学习笔记+案例
热门推荐
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
EPICS工具CSS学习笔记
qq_43456972的博客
10-13 2373
控制系统工作室(CSS)是一项实现控制系统相关的应用，主要针对的是操作员界面。它是基于目前的软件技术（Java、Eclipse），并特别强调了互操作性。 使用Centos7.0系统作为EPICS环境开发，搭建了CSS基础的控件操作，并成功运行。
CSS学习笔记
Curry_On的博客
10-26 2317
CSS学习笔记 本文根据B站pink老师视频整理，供复习参考 笔记内容（更新中）：
CSS基础学习
weixin_68705721的博客
03-31 1711
HTML标签 属性：网页的内容HTML：网页的内容CSS：内容的样式可以实现内容和样式相分离，便于修改样式。2.CSS语法字号color:blue;文字颜色加粗注意：a.要把它们放在p{}（选择器）里b.后面的是属性值，别忘记加分号。
CSS学习总结
weixin_45148589的博客
03-13 3423
目录一、学习收获通过上次课的学习，对CSS有了如下的了解和收获：1.对CSS的背景的了解2.CSS的基本概念的学习3.对CSS的一些语法的掌握4.对于CSS的样式及生效的具体深入学习外部样式表内部样式表内联样式级联的优先级5.对CSS中颜色、尺寸、对齐等概念的学习6.CSS的盒子模型的学习7.对CSS的边框边距设置的学习8.对CSS中的定位概念的学习9.对CSS中溢出功能的学习10.对CSS中浮动的学习11.CSS中不透明度的调节学习12.对于CSS中组合选择器的学习13.最后的伪类伪元素的学习二、总结 一
黑马程序员pink老师_CSS学习笔记
weixin_46764819的博客
03-07 1万+
CSS参考手册网址 一、CSS字体样式属性 font-size：字号 相对长度单位 说明 em 相当于当前对象内文本的字体尺寸 px 像素【最常用，推荐使用】 绝对长度单位 说明 in 英寸 cm 厘米 mm 毫米 pt 点 font-family：字体样式 p { 　　font-family: "宋体"；／＊可以写多个字体，用英文逗号隔开，表示找不到１字体去找２字体，.
CSS学习总结与心得体会
m0_49305575的博客
07-11 6554
CSS的学习总结与心得体会 CSS又称为层叠样式表，学习CSS就是学习许多选择器以及属性。CSS的主要作用是对前端页面进行布局与美化。 布局 盒子模型 块级元素并排显示 盒子模型 盒子模型是对页面进行布局所需要使用的非常重要的一部分。盒子模型本质上就是一个盒子，它包括边距（margin）、边框（border）、填充（padding）、内容（content）、背景（backbround），下面对每一部分进行简单的说明。 margin(外边距)：清除边框外的区域，外边距是透明的； border(边框)：
HTML和CSS学习.zip
01-01
HTML和CSS学习HTML和CSS学习HTML和CSS学习HTML和CSS学习 HTML和CSS学习HTML和CSS学习HTML和CSS学习HTML和CSS学习 HTML和CSS学习HTML和CSS学习HTML和CSS学习HTML和CSS学习 HTML和CSS学习HTML和CSS学习HTML和CSS学习...
HTML+CSS学习笔记.zip
01-01
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
html+css学习记录.zip
01-01
html+css学习记录html+css学习记录html+css学习记录html+css学习记录 html+css学习记录html+css学习记录html+css学习记录html+css学习记录 html+css学习记录html+css学习记录html+css学习记录html+css学习记录 ...
CSS——弹性盒子布局（display: flex）
懒羊羊大王的博客
09-14 969
Flexbox或者是弹性布局，它的全称叫做弹性盒子布局，那么它到底该如何实现呢？从我们熟悉的 display 属性开始。给元素添加 display: flex，该元素变成了一个弹性容器（flex container），它的直接子元素变成了弹性子元素（flex item）。那么我们该如何具体地操作使用呢？下面我们来进行细致深入的学习。
js的书写位置和css的书写位置的区别？为什么要这样写？
QQ1257871322的博客
09-10 427
这种分离方式有助于优化加载速度和页面渲染性能，使得 HTML、CSS 和 JavaScript 各司其职，各自处理不同的任务。JavaScript 用于添加页面的动态行为和交互。标签之前），以确保在执行脚本时页面的 DOM 元素已经加载完毕，从而避免脚本执行时无法找到需要操作的元素。CSS 主要用于控制页面的视觉样式和布局，通常在 HTML 文件的。部分引入，以确保在页面渲染时样式已经加载完毕，从而避免样式闪烁。标签中，或者在外部样式表文件中（标签中，或者在外部脚本文件中（
基于less和scss 循环生成css
最新发布
k0933的博客
09-14 158
【代码】基于less 循环生成css。
css 个人喜欢的样式 速查笔记
waterHBO的博客
09-07 520
记录自己喜欢的， 觉得比较好看的 css.下次用的时候，直接复制，很方便。
CSS学习瓶颈期：理解与突破的重要性
在CSS学习过程中，常常会遇到一个关键的阶段，被称为"瓶颈期"，它如同瓶子的颈部，看似狭窄而困难，但突破后则意味着技能的飞跃和理解的深化。在这个阶段，初学者可能会感到迷茫和自我怀疑，认为CSS不过如此，但实际...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值