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 为基础。

相关推荐
别拿曾经看以后~1 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试1 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
problc1 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_9152 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼3 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨4 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
前端青山9 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
从兄10 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript