css笔记1

  1. > 作用于元素的第一代后代,空格 作用于元素的所有后代。
  2. 三种样式是有优先级的,记住他们的优先级:内联式 > 嵌入式 > 外部式
  3. input当 type="radio" 时,控件为单选框 , 同一组 的单选按钮,name 取值一定要一致
  4. Table:thead、tbody、tfoot(三者里面分别有tr,td,th)

如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。(通俗理解table 可以按结构一块块的显示,不在等整个表格加载完后显示。)

  1. Table:tr,td,th,caption
  2. 使用<ul><li>标签实现无序列表
  3. 使用<ol><li>标签实现有序列表
  4. * {color:red;} 通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素
  5. 伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说a:hover{color:red;}关于伪选择符:

关于伪类选择符,到目前为止,可以兼容所有浏览器的"伪类选择符"就是 a 标签上使用 :hover 了(其实伪类选择符还有很多,尤其是 css3 中,但是因为不能兼容所有浏览器,本教程只是讲了这一种最常用的)。其实 :hover 可以放在任意的标签上,比如说 p:hover,但是它们的兼容性也是很不好的,所以现在比较常用的还是 a:hover 的组合。

  1. 分组选择符(,)
  2. CSS的某些样式是具有继承性的,如某种颜色。但注意有一些css样式是不具有继承性的。如border:1px solid red;
  3. (1)、如果一个元素使用了多个选择器,则会按照选择器的优先级来给定样式。

(2)、选择器的优先级依次是: 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

  1. 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。例如下面的代码:

p{color:red;} /*权值为1*/

p span{color:green;} /*权值为1+1=2*/

.warning{color:white;} /*权值为10*/

p span.warning{color:purple;} /*权值为1+1+10=12*/

#footer .note p{color:yellow;} /*权值为100+10+1=111*/

注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。

  1. 为所欲为 - 选择器最高层级!Important。 注意:!important要写在分号的前面
    浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式
  2. color的值有3种设置方式:
    p{color:red;} p{color:rgb(133,45,200);}p{color:rgb(20%,33%,25%);} p{color:#00ffff;}
  3. 网页中的字体css样式代码也有他自己的缩写方式,下面是给网页设置字体的代码:
  4. body{

font-style:italic;

font-weight:bold;

font-size:12px;

line-height:1.5em;

font-family:"宋体",sans-serif;

}

这么多行的代码其实可以缩写为一句:

body{

font:italic bold 12px/1.5em "宋体",sans-serif;

}

注意:

(1)、使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。

(2)、在缩写时 font-size 与 line-height 中间要加入"/"斜扛。

  1. 技术点的解释:

(1)、text-decoration可以设置添加到文本的修饰。

(2)、text-decoration默认值为none, 定义标准的文本。

(3)、text-decoration的值为underline为定义文本下的一条线。

(4)、text-decoration的值为overline为定义文本上的一条线。

(5)、text-decoration的值为line-through为定义穿过文本下的一条线,一般用于商品折扣价。

  1. 使用text-indent为文本添加首行缩进 注意:2em的意思就是文字的2倍大小
  2. 使用line-height为文字设置行间间距
  3. 如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing 来实现
    注意:这个样式使用在英文单词时,是设置字母与字母之间的间距。
  4. 如果我想设置英文单词之间的间距呢?可以使用 word-spacing 来实现。
  5. 想为块状元素 中的文本、图片设置居中样式吗?可以使用text-align样式代码。
  6. 长度单位总结一下,目前比较常用到px(像素)、em、% 百分比,要注意其实这三种单位都是相对单位。在目前大多数的设计者都倾向于使用像素(px)作为单位。

就是本元素给定字体的 font-size 值,如果元素的 font-size 为 14px ,那么 1em = 14px;如果 font-size 为 18px,那么 1em = 18px。(%同上面em)
下面注意一个特殊情况:

但当给 font-size 设置单位为 em 时,此时计算的标准以 p 的父元素的 font-size 为基础。

相关推荐
嚣张丶小麦兜15 分钟前
Vue常用工具库
前端·javascript·vue.js
小飞侠在吗1 小时前
Vue customRef
前端·javascript·vue.js
指尖跳动的光2 小时前
判断页签是否为活跃状态
前端·javascript·vue.js
嚣张丶小麦兜3 小时前
认识vite
前端·javascript·vue.js
lcc1874 小时前
CSS 定位
css
oak隔壁找我4 小时前
Node.js的package.json
前端·javascript
支撑前端荣耀4 小时前
从零实现前端监控告警系统:SMTP + Node.js + 个人邮箱 完整免费方案
前端·javascript·面试
shanLion4 小时前
Vite项目中process报红问题的深层原因与解决方案
前端·javascript
烟袅4 小时前
从零构建一个待办事项应用:一次关于组件化与状态管理的深度思考
前端·javascript·react.js
我命由我123456 小时前
CSS 锚点定位 - 锚点定位引入(anchor-name、position-anchor)
开发语言·前端·javascript·css·学习·html·学习方法