【狂神css笔记】美化网页元素

span标签：重点突出

字体样式

font-family:字体

font-size:字体大小

font-weight:字体粗细

color:字体颜色单词/#rgb/rgba（x,x,x,0~1）a为透明度

写在一起：

文本样式：

排版：text-align:center/right/left

首行缩进：text-indent:2em

行高：line-height

高度：height

行高和高度一致上下居中

下划线：text-decoration:underline

中划线：text-decoration:line-throuth

上划线：text-decoration:overline

超链接去下划线：text-decoration:none

水平对齐：1，2{verticl-align:middle}

超链接伪类：

hover：鼠标悬浮的状态

超链接去下划线+鼠标悬浮变色：

 a{text-decoration:none;color:black;}a:hover{color:orange;}

active：鼠标按住未释放的状态

阴影（不用）：

text-shadow:阴影颜色水平偏移垂直偏移阴影半径

列表：

list-style:none(无点)，circle(空心圆)，decimal（数字）square（正方形）

背景：

背景颜色：

<html><head lang="1"><meta charset="UTF-8"><title>1</title><style>#nav{width: 300px;background-color: gray;}.title{font-size: larger;color: red;background-color:rebeccapurple;}ul li{height: 40px;list-style: none;text-indent: 1em;background-color: gray;}a{text-decoration: none;font-size: 14px;color: black;}a:hover{color: green;}</style></head><body><div id="nav"><h2 class="title">商品分类</h2><ul><li><a href="#">图书</a></li><li><a href="#">家用电器</a></li><li><a href="#">电脑</a></li></ul></div></body>
</html>

背景图片:background-image :颜色，图片，位置图片与标签风格一致

盒子模型：

margin:外边距

padding:内边距

border:边框

盒子的计算方式：margin+border+padding+内容宽度

圆角边框：border-radius: (px)

阴影：box-shadom

display：浮动

块元素：可以占多行

行内元素：只能占一行

block：块元素

inline：行内元素

inline-block:块元素可以在一行

none：消失

float:浮动left right（常用）

clear：

right右侧不允许有浮动元素left左侧不允许有浮动元素both：两侧不允许有浮动元素

定位positon:

相对定位：

相对自己原来的位置进行偏移，相对定位，原来位置会被保留

positon：relative

top/bottem/left/right:正移为负

绝对定位：

基于Xxx定位

没有父级元素定位，相对于浏览器

假设父级元素存在定位，通常相对于父级元素进行定位

相对于父级或浏览器的位置，进行指定的偏移，不在标准文档流中，原来的位置不会被保留

fixed:固定定位

z-index:层级（0~）

opacity:透明度

【狂神css笔记】美化网页元素相关推荐

CSS笔记 —— 美化网页
本篇博客是根据B站up@遇见狂神说的视频以及W3school官网文档整理的笔记,里面会有一些视频的截图.代码和官网的概念,以及我个人的注释笔记,代码例子等. 全篇博客包括代码均为自己手打,结果截图均 ...
CSS基本美化网页元素
字体样式实例 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
CSS 美化网页元素
文章目录 1.为什么要美化网页元素 2.span标签 3.字体样式 4.文本样式 4.1.颜色 4.2.文本对齐的方式 4.3.首行缩进 4.4.行高 4.5.装饰 5.超链接伪类以及文本阴影 6.列 ...
CSS——美化网页元素（字体样式，文本样式，阴影，超链接伪类，列表，背景，渐变）
为什么要美化网页 1.1有效的传递页面信息 1.2美化网页,页面漂亮,才能吸引用户 1.3凸显页面主题 1.4提高用户体验 span标签:重点要突出的字使用该标签套起来 <!DOCTYPE ht ...
【狂神css笔记】CSS介绍选择器
css是什么 Cascading Style Sheet:层叠级样式表 CSS:表现(美化网页) 字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动...... css优势: 1.内容和表现分 ...
CSS之美化网页（其二）
3.美化网页 3.1.为什么要美化网页 1.有效的传递页面信息 2.美化网页,页面漂亮才能吸引用户 3.凸显页面主题 4.提高用户的体验 span标签:重点要突出的字,使用span 套起来 <h ...
CSS美化网页元素大全
< span>标签作用:能让某几个文字或者某个词语凸显出来 1.CSS 字体属性属性描述 font 简写属性.在一条声明中设置所有字体属性,简写顺序:字体风格→字体粗细→字体大小→字 ...
第五课 CSS美化网页元素
为什么用CSS 1.有效的传递页面信息 2.使用CSS美化过的页面文本,使页面漂亮.美观,吸引用户 3.可以很好的突出页面的主题内容,使用户第一眼可以看到页面主要内容 4.具有良好的用户体验编辑网页 ...
【CSS—美化网页元素】
1. 字体样式 span变迁:重点要突出的字,用span套起来 <!DOCTYPE html> <html lang="en"> <head>& ...

【狂神css笔记】美化网页元素

【狂神css笔记】美化网页元素相关推荐

最新文章

热门文章