CSS样式学习

1. 背景

真的是个很小的知识点,但是不能放弃,样式写得好,决定了你的产品的美观度,优秀的美观更容易被市场接受并推广

2. 笔记

样式和代码分开 <link rel="stylesheet" href="./css/style01.css"></link>

2.1 CSS的三种导入方式

复制代码
行内样式、内部样式、外部样式

优先级:就近原则

2.2 基本选择器

bash 复制代码
作用: 选择页面上的某一个元素或者某一类元素

基本选择器: 标签选择器、类选择器、id选择器,优先依次提高

2.3 层级选择器

css 复制代码
/* 后代选择器 ,包含后代的后代*/
   body p {
     background: green;
   }
   
/* 子选择器 */
   body>p {
     background: green;
   }    
   
   
/* 向下相邻兄弟选择器,只有一个 */
   .active + p {
     background: green;
   }
   
/* 向下通用所有兄弟选择器 */
   .active~p {
     background: green;
   }

2.4 结构伪类选择器

: 就是伪类

css 复制代码
 /* ul 的儿子第一个 li*/
ul li:first-child {
  background: green;
}

2.5 属性选择器

css 复制代码
/* 选中a标签中有id属性的标签 */
a[id] {
	background: yellow;
}



/* 选中a标签中有id属性为first的a标签 */
a[id=first] {
	background: yellow;
}



/* 选中a标签中有class属性为item first的a标签  *= 是包含的意思*/
a[class="item first"] {
	background: yellow;
}


/* 选中a标签中有href属性以http 开头*/
a[href ^=http] {
	background: grey;
}

text-align: center; 文字排版

text-indent: 2em; 首行缩进

height和行高line-height 一样的时候文字就可以上下居中

text-decoration: none; 标签去下划线

2.6 超链接伪类

css 复制代码
a {
    color: black;
    text-decoration: none;
  }
  /* 鼠标悬浮的颜色 */
  a:hover {
    color: orange;
    font-size: 50px;
  }

  /* 鼠标按住未释放的状态 */
  a:active {
    color: green;
  }

2.6 渐变

background-color:blueviolet; background-image: -moz-repeating-linear-gradient();

2.7 盒子模型

margin:外边距

padding: 内边距

border: 边框

边框: 粗细、样式、颜色

2.8 登录页面学习

/Users/jlgl/Downloads/软件/vue/代码/vue_basic/css/圆角边框

juejin.cn/post/714382...

vw : 相对于视口的宽度,1vw 等于视口宽度的1%(总视口宽度为100vw)

vh : 相对于视口的高度, 1vh 等于视口高度的1%(总视口高度为100vh)

2.9 display

标准文档流 块级元素:独占一行,h1 到h6, p, div 行内元素:不独占一行

块级元素可以包含行内元素,反之不可以 inline: 行内元素 inline-block: 是块元素,但是可以内联,在一行 none:不出现了

我的进度

www.bilibili.com/video/BV1YJ...

相关推荐
非凡ghost10 分钟前
AOMEI Partition Assistant磁盘分区工具:磁盘管理的得力助手
linux·运维·前端·数据库·学习·生活·软件需求
UrbanJazzerati24 分钟前
前端入门:margin居中、border、box-radius、transform、box-shadow、mouse事件、preventDefault()
前端·面试
蝎子莱莱爱打怪24 分钟前
🚀🚀🚀嗨,一起来开发 开源IM系统呀!
前端·后端·github
Enddme29 分钟前
《前端笔试必备:JavaScript ACM输入输出模板》
前端·javascript·面试
前端鱼29 分钟前
前端面试中值得关注的js题
前端·面试
UnnamedOrange36 分钟前
有来前后端部署
前端·后端
德育处主任38 分钟前
p5.js 绘制 3D 椭球体 ellipsoid
前端·javascript·数据可视化
未来之窗软件服务41 分钟前
未来之窗昭和仙君 (四) 前端网页分页 — 东方仙盟筑基期
前端·仙盟创梦ide·东方仙盟·东方仙盟修仙·昭和仙君
安卓开发者1 小时前
鸿蒙Next Web组件详解:属性设置与事件处理实战
前端·华为·harmonyos
安卓开发者1 小时前
鸿蒙NEXT Web组件与JavaScript交互:打通原生与前端的桥梁
前端·javascript·harmonyos