CSS属性:
1、文本与字体属性
2、列表属性
3、浮动属性
4、背景属性
5、盒子模型
6、定位属性
一、字体属性:
1、font-size ---- 字体的大小
2、font-family ---- 字体的类型
3、font-style ---- 字体的风格 font-style:italic 斜体字体样式
4、font-weight ---- 字体的粗细
二、文本属性:
1、color ---- 设置文本颜色
2、line-height ---- 设置行高 line-height:24px
3、text-align ---- 设置文本的对齐方式 left right center
4、text-decoration ---- 向文本添加修饰(overline--上划线 underline--下划线 line-through--删除线)
三、列表属性:
1、list-style-type ---- 表示设置列表标志的类型
2、list-style-image ---- 表示将图像设置为列表项标志
3、list-style-position ---- 表示设置列表项标志的位置
list-style-type:
1、disc:缺省值,黑圆点
2、circle:空心圆点
3、square:小黑方块
4、none:无列表项标志
list-style-image:
list-style-image:url(../image/doc.gif);
list-style-position
1、outside ---- 项目标记在文本以外,环绕文本不根据标记对齐
2、inside ---- 项目标记在文本以内,环绕文本根据标记对齐
list-style
list-style:circle inside url(../image/doc.gif);
顺序为:1、list-style-type 2、list-style-position 3、list-style-image
四、浮动属性:
1、float:元素向哪个方向浮动 (none right left)
2、clear:设置元素的哪一侧不允许有浮动元素 (none left right both)
五、背景属性:
1、background-color ---- 表示背景颜色 (transparent ---- 透明的背景颜色)
2、background-image ---- 表示背景图像
3、background-repeat ---- 表示背景的重复方式
(repeat在水平和垂直方向上重复
repeat-x在水平方向上重复
repeat-y在垂直方向上重复
no-repeat不重复)
4、background-position ---- 表示图像的起始位置
1、使用百分比,共有两个值,一个是在水平方向,一个是在垂直方向
2、使用top、left、center、right、bottom
3、使用像素,共有两个值,一个是在水平方向,一个是在垂直方向
六、盒子模型
1、border ---- 边框
2、padding ---- 填充
3、margin ---- 边界
4、content ---- 内容
一个盒子模型的实际宽度 = 内容 + border + padding + margin
border:
border-top border-left border-right border-bottom
三个属性: color width style
一起设置时顺序为:上右下左
分享到:
相关推荐
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
从基础入手,学习更容易,笔记一目了然。 零基础HTML+CSS+DIV笔记让您更快进入网页编程的世界。 -------------------------------------------------------------
根据pink老师的课程做的学习笔记 学习HTML、CSS以及HTML5 CSS3新增的属性、看完这篇文章你就学会了
java编程可以分成三个方向: 1、java se (j2se)桌面开发 java中的基础中的基础 2、java ee (j2ee)web开发 3、java me (j2me)手机开发 java se课程介绍 java面向对象编程(基础) java图开界面开发 java数据库编程 ...
零基础开始学习前端,HTML和CSS
零基础开始学习web,HTML和CSS
该资源包含“淘宝商城首页_开发项目(静态)”的...若想要理解项目中的重难点,请参考我的博客中的《HTML+CSS零基础学习笔记(五)— 模拟淘宝首页(静态)》一文。总结自《渡一教育_2020权威HTML+CSS零基础入学》。
课程中使用的所有英文单词都会逐一查询并记录,真正做到零基础入门学习,最适合初学者的教程,让你少走弯路!课程内容包括:1.CSS简介2.CSS基本用法3.选择器4.常用CSS属性5.盒子模型6.定位方式7.其他CSS属性8.页面...
│ │ └笔记.doc │ ├ │ │ ├[思库教育]第25集 斐波纳挈数列.mp4 │ │ └[思库教育]第26集 数组的遍历.avi │ ├ │ │ ├[思库教育]第27集 猴子吃桃.avi │ │ ├[思库教育]第28集 杨辉三角.avi │ │ ├[思库...
我的学习笔记我的个人学习笔记集,包括各种课程,教程,文章或讲座。前端HTML,CSS,Sass JavaScript 解决freeCodeCamp和HackerRank挑战JavaScript算法 React体验一下React:构建您的第一个ToDo应用并将其托管在...
本套视频为传智2018web前端开发全套视频教程基础班+就业班,视频+源码+案例笔记,全套高清不加密~2018最新传智播客视频!...本套课程,特别适合零基础者进行系统学习前端! 下载地址:txt文档中网盘链接
本套视频为传智2018web前端开发全套视频教程基础班+就业班,视频+源码+案例笔记,全套高清不加密~2018最新传智播客视频!...本套课程,特别适合零基础者进行系统学习前端! 下载地址:txt文档网盘
课程中使用的所有英文单词都会逐一查询并记录,真正做到零基础入门学习,适合初学者的教程!课程内容包括:1.HTML简介、文档结构2.Sublime的使用3.常用标签4.超链接、表格、表单5.内嵌框架iframe6.HTML5简介、新特性...
本资源采用html5 css3 js 技术,使网页中由于多粒子在不断跳动,形成一个爱心,零基础小白可查看源代码进行学习,当然,也可以下载对自己的女神表白,话不多说,快来下载吧!!!!!
leetcode 530 每周算法 HTML CSS Javascript 前端构建工具 小游戏 框架 数据库 学习笔记 ...个人独白,记录学习经验,希望能改掉自己学完就扔的老毛病。...CSS ...从零搭建webpack配置系列 ...vue基础 ...学习笔记
个人学习笔记与博文 Menu Tools Plugin css-plugin js-plugin react-plugin python-plugin Framework css-ui-framework react-ui-framework Notes JavaScript Python html & css 前端工程 NodeJS 基础 Express KOA ...