首页 前端知识 题外: css学习

题外: css学习

2024-11-02 10:11:58 前端知识 前端哥 831 352 我要收藏

学习来源:w3school 在线教程icon-default.png?t=O83Ahttps://www.w3school.com.cn/

CSS使用

外部CSS

 

内部CSS

在head部分的<style>元素进行定义

行内CSS

读取优先级问题

最终是读取最后读到的样式

 

css颜色

 

   CSS文本颜色

 

css边框颜色

 

CSS RGB颜色

RGBA

增加了不透明度 0.1-1

 

HEX值

 

HSL颜色

饱和度

亮度

 

 

css背景

 

background-color

属性指定元素的背景色

颜色设置

 

透明度

 

RGBA颜色值and透明度

注意:rgba是背景 总体颜色和透明度

 

Background-image

(默认图形重复达到覆盖元素的目的)

文字难以阅读

 

特定元素设置背景

 

background-repeat

只在水平方向重复

 

只在垂直方向重复

只显示一次背景图象

 

 

background-position

重要的一个设置 ,试着学习and应用

 

 

Background-attachment

 

 

 

background简写属性

 

 

总结

 

盒子模型

 

CSS边框

CSS边框属性

 

CSS边框样式

 

CSS边框宽度

注意 顺序 上右下左(顺时针 )

 

CSS边框颜色

 

 

特定边框颜色(上  右 下 左)

 

CSS边框各边

 

 

CSS简写边框属性

 

CSS圆角边框

Border-radius    添加圆角边框

 

总结:

 

CSS边距

 

 

CSS外边距

 

margin简写属性

如果有缺默认对称

 

auto值

 

 

 

 

inherit 值

 

CSS外边距合并

 

 

 

CSS内边距

设置方式与magrin相似

 

 

 

box-sizing

 

CSS宽度和 高度

注意属性不包括内边距,外边距,边框或外边框

 

max-width

 

 

 

CSS框模型

 

 

 

CSS轮廓

 

样式

 

 

CSS轮廓宽度

 

 

 

CSS轮廓颜色

 

 

 

CSS轮廓简写

 

CSS轮廓偏移

 

文本

 

CSS文本

 

 

CSS文本对齐

justify

Direction unicode-bidi

 

 

 

 

 

CSS文本装饰

Text-decoration

 

 

 

 

CSS文本转换

 

CSS文字间距

 

文字缩进(text-indent)

 

字母行距(letter-spacing)

 

行高 line-height

 

字间距(word-spacing)

 

 

空白(white-space)

 

 

CSS文本阴影

 

 

 

字体

 

 

 

 

字体样式

 

 

字体大小

em设置字体大小

1em=16px

 

谷歌字体

 

字体属性

 

 

CSS图标

 

 

Bootstap图标

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

 

谷歌图标

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

 

 

 

CSS链接

颜色不停的 变化

 

文本装饰

 

背景色

 

Target  按钮

 

 

CSS列表

 

定位列表标记

 

删除默认设置

 

列表简写属性

 

 

表单

 

 

 

 

 

表格宽度和高度

 

 

对齐

 

 

表格内距

 

 

水平分割

 

可悬停表格

 

条纹表格

 

 

表格颜色

 

响应式表格

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19764.html
标签
评论
发布的文章

FASTJSON2使用方法

2024-11-26 11:11:29

hadoop_HA高可用

2024-11-26 11:11:24

(vue)子组件绑定的ref使用

2024-11-26 11:11:24

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!