css 笔记整理

xiaoxiao2021-02-28  22

html是什么 html(Hypertext Markup Language)—— 结构 超文本 标记 标签 <> 标签对 单标签 在标签中间—— 标签名 语言

css

凡是写在标签名后面的都是标签的属性 可以自动刷新浏览器属性名称 = “属性值”

border

<!-- border 边框的粗细(宽度) 边框的样式 solid dotted dashed 边框的颜色 英文单词 red 十六进制 #8c8c8c rgb() red green blue --> border 区域会不会显示背景图(会显示) <style> .box{ width:300px; height:200px; border:10px d #0c0c0c; background: url("img/14.jpg") repeat-y; margin:40px 30px 20px 10px; } </style> </head> <body> <div class="box"></div> </body> border-color 边框颜色border-style 边框样式border-width 边框宽度 border-top border-top-color border-top-style border-top-width border-bottom-style: dashed; dashed 虚线 dotted 点线

background 参数不受顺序影响

背景色 background-color 背景图 background-image

背景图平铺 background-repeat

1: repeat 平铺(默认值); 2: no-repeat 不平铺 3: repeat-x 横向平铺 4: repeat-y 纵向平铺

背景图定位 background-position

背景图定位 如果只给X轴的值(一个值) 那么Y轴会默认center

第一个值 x轴 (num center left right) 第二个值 y轴 (num center left right)
背景图是否滚动 background-attachment
fixed 固定 位置是以浏览器的可视区域来定位 不会随着页面的滚动而改变自身的位置 scroll 滚动 位置是以容器来定位 会随着页面的滚动而改变自身的位置

- 背景图背景色

background: #0b9380 url(img/email.png) no-repeat 0 0 fixed ; 颜色写在前面

font

文字复合样式 font: bold italic 50px '宋体'; font: 第一二个值(文字着重和文字样式) 第三个值 font-size( 文字大小 ) 第四个值 font-family( 文字字体 )

font-weight

1: bold 加粗 2: normal (正常,不加粗) 默认值 3: 100 -700 4: border(比较级)

相对于父级更粗一点,并且只有两个状态,一个是正常(normal)一个是加粗 (bold)

文字大小 font-size

文字样式 font-style

italic(倾斜) normal(正常)

font-family: ‘宋体’,’Arial’, “微软雅黑”,’microsoft yahei’;文字颜色 color

文本对齐方式 text-align

: letf 左对齐 : right 右对齐 : center 居中对齐 首行缩进 text-indent <style> #box{ border:1px solid #0b9380; width:400px; font-size:44px; text-indent: 2em; } </style> <body> <div id="box"> 邮件地址 </div> <!-- px 像素 em 相对单位 text-indent 文字缩进 --> </body> text-decoration 文本修饰 <style> text-decoration:underline; <style> <!-- text-decoration 文本修饰 underline 下划线 line-through 中划线 overline 上划线 -->

文字间距

letter-spacing字母间距 word-spacing 单词间距(是以空格为解析单位)

强制不换行 white-space

white-space: nowrap 不换行 normal 正常

padding

padding 内边距 内填充占位宽 border padding width margin <!-- padding:一个值 四个方向 padding:两个值 第一个值 上下 第二个值 左右 padding:三个值 第一个值 上 第二个值 左右 第三个值 下 padding:四个值 上,右,下,左 -->

margin

1.两个相邻的同级别元素上下margin会叠压 解决方案: 1: 给这个2个元素加 float 2: 转换为行内块 display: inline-block 2.margin的上下传递(父子级元素) 解决方案:01:给父级加overflow:hidden 或者 加边框 border 或者给 子级加 position:absolute;

邮件

<a href="mailto:test@miaov.com">发邮件</a> <a href="tel:01029837492">打电话</a> // 手机端可用

标签

锚点

<head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ height:30px; background: #0b9380; color: #fff; margin-bottom: 1000px; } </style> </head> <body> <a href="#box1" target="_blank"></a> <a href="#box2">box2</a> <a href="#box3">box3</a> <div class="box" id="box1">box1</div> <div class="box" id="box2">box2</div> <div class="box" id="box3">box3</div> </body> a标签target 属性; _blank 在新窗口中打开被链接文档。 _self 在被点击时的同一框架中打开被链接文档(默认)。 _parent 在父框架中打开被链接文档。 _top 在窗口主体中打开被链接文档。 a 伪类; a:link{ color: yellow; } link 未访问过 hover 鼠标悬停 active 鼠标按下 visited 访问过后

常用标签

<header>页眉,主要用于页面的头部的信息介绍,也可用于板块头部</header> <nav>导航 (包含链接的的一个列表)</nav> <footer>页脚 页面的底部 或者 版块底部</footer> <section> 页面上的版块 用于划分页面上的不同区域,或者划分文章里不同的节<section> <article>用来在页面中表示一套结构完整且独立的内容部分</article> <aside>侧边栏、广告</aside> <time>用来表现时间或日期</time> <h1>这个是h1标签</h1> <h2>这个是h2标签</h2> <h3>这个是h3标签</h3> <h4>这个是h4标签</h4> <h5>这个是h5标签</h5> <h6>这个是h6标签</h6> <div>这个是div标签</div> <p>段落</p> <strong>强调</strong> <b>强调</b> <em>强调</em> <ul> </ul> <ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol> <dl> <dt>列表头</dt> <dd>列表项</dd> <dd>列表项</dd> <dd>列表项</dd> <dd>列表项</dd> </dl> <mark>h1标签在一个页面上最好只出现一次 并且,用在logo身上</mark>

选择器

群组选择器 .name,span,em 包含选择器 .name span em通配符 选中页面上所有的标签 *id 选择器class 选择器选择器 优先级 style > ID > class > 标签

css_reset 清除默认样式

有默认margin的元素 body,h1~h6,p,ul,ol,dl,dd 有默认padding的元素 ul,ol ul,ol身上都有默认的list-style 在清除的时候,可以直接清除li身上的list-style 但是要记住,默认的list-style是在谁身上产生的

块元素

块元素的特征 1,默认独占一行 2,支持所有css样式 3,没有宽度的时候,默认撑满父级的宽

行内元素

内嵌(内联、行内)的特征 1、同排可以继续跟同类的标签(一行可以显示多个同类型的标签) 2、内容撑开宽度(所有的标签都是内容撑开高度) 3、不支持宽高 4、不支持上下的margin 5、代码换行被解析(解析成空格 —— 一个空格的大小)

行内块

内联块特性: 1、让块在一行显示; 2、让行内元素支持宽高; 3、没有宽度的时候内容撑开宽度
转载请注明原文地址: https://www.6miu.com/read-2450366.html

最新回复(0)