CSS学习笔记
TITLE:CSS学习笔记
为初学者准备的:CSS速成
什么是CSS
层叠样式表
<p> Lorem ipsum dolor sit amet </p>
P{
color:red;
}
Selector{Property:Value;}
选择器 { 属性:值 ;}
三种方式添加CSS
外部样式表
CSS 保存在.css文件中
在html里使用引用
内部样式表
不使用外部CSS文件
将CSS放在HTML p { color: rgba(255, 0, ...
css学习
1、什么是CSS
如何学习
CSS是什么
CSS怎么用
CSS选择器(重点,难点)
美化网页(文字,阴影,超链接,列表,界面。。。。)
盒子模型
浮动
定位
网页动画(特效)
1.1、什么是CSS
Cascading Style Sheet 层叠级联样式表
CSS:表现(美化页面)
字体,颜色,边距,高度,宽度,图片
1.3、快速入门
练习格式:
style
基本 ...
css的重点系统学习
1、如何学习?
css是什么
css怎么用(快捷入门)
css选择器(重点+难点)
美化网页(文字,阴影,超链接,列表,渐变...)
盒子模型
浮动
定位
网页动画(特效效果)
1.1、什么是css
Cascading Style Sheet 层叠级联样式表
css:表现层(美化网页)
字体,颜色,边距,高度,宽度,背景图片,网页定位,网 ...
css的重点系统学习
1、如何学习?
css是什么
css怎么用(快捷入门)
css选择器(重点+难点)
美化网页(文字,阴影,超链接,列表,渐变...)
盒子模型
浮动
定位
网页动画(特效效果)
1.1、什么是css
Cascading Style Sheet 层叠级联样式表
css:表现层(美化网页)
字体,颜色,边距,高度,宽度,背景图片,网页定位,网 ...
CSS学习
CSS学习
伪类选择器
以:开头的选择器称为伪类选择器
链接伪类选择器
用于处理a标签链接的选择器
a:link 指未被访问时的a标签
a:visited 指被访问过的a标签
a:hover 指鼠标经过时的a标签
a:active 指鼠标点击时的a标签
a:link {
color: #000;
text-decoration: none;
...
学习CSS
初识
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--规范,<style> 可以编写css的代码,每一个声明,最好用分号结尾 语法: 选择器{ & ...
CSS学习总结
/* 总结CSS学习 */
/* 1.字体样式 */
a{
font-size: 20px; /* 字体大小 单位px em */
font-family: "宋体";/* 微软雅黑 宋体 黑体 */
font-family: Arial,"微软雅黑","宋体","黑体";/* 同时指定多个字体.中间以逗号隔开,浏览器如果不支持。会一直往后面找。 */
font-family: "\5b8b\4153";/* \5b8b\ ...
CSS学习(5)
CSS学习(5)
精灵图
使用精灵图核心:
精灵技术主要针对于背景图片的使用,就是把多个小背景图片整合到一张大图片中。
这个大图片也称为sprites精灵图或者雪碧图
移动背景图片位置,此时可以使用background-position。
移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同。
因为一般情况下都是往上往左移动 ...
CSS学习笔记
什么是CSS
如何学习
1. CSS是什么
2. CSS怎么用(快速入门)
CSS选择器(重点+难点)
美化网页(文字、阴影、超链接、列表、渐变...)
盒子模型
浮动
定位
网页动画(特效效果)
什么是CSS
Cascading Style Sheet层叠样式表
CSS:表现(美化网页)
字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动
发展史
...
CSS学习(4)
CSS学习(4)
PS切图
图层切图
右键选中的图层,点击快速导出为PNG。
如果需要将多个图层合并成一张PNG输出,则选中多个图层,然后点击图层->合并图层(或者crt+E)。
切片切图
利用切片工具手动划出
文件菜单->导出->存储为web设备所用格式->选择我们要的图片格式->存储
PS插件切图
使用Cutterman插件进行切图。
CSS属性 ...
css学习笔记(狂神说)
CSS3学习
##学习自狂神##
1.css是什么 2.CSS怎么用(快速入门) 3.CSS选择器(重点 + 难点) 4.美化页面(文字、阴影、超链接、列表、渐变…) 5.盒子模型 6.浮动 7.定位 8.网页动画(特效)
1.什么是CSS
1、什么是CSS
Cascading Style Sheet 层叠样式表 CSS:表现(美化网页) 字体,颜色,边距,高度,宽度,背景图片 ...
CSS 学习(3)
CSS 学习(3)
盒子模型
盒子的组成
border边框,content内容,padding内边距,margin外边距。
边框(border)
border-with:边框的粗细(一般情况下使用px为单位),未指定边框样式没法显示。
border-style:边框的样式(solid实线,dashed虚线,dotted点线)。
border-color:边框的颜色。
复合性写法:border:1px solid ...
CSS学习(2)
CSS学习(2)
Emmet语法
emmet语法可以通过缩写的形式来提高html/css的编写速度
生成标签:输入标签名按下tab键
生成多个相同标签:如div*3
生成父子级关系:如ul>li
生成兄弟级关系:如div+p
生成带有类名或id名字的标签:标签名称.demo或#two按下tab键就可以了
生成div类名有序:用自增符号$
标签生成中带有默认文字:{} ...
CSS学习笔记【3】
上集:CSS学习笔记【1】
上集:CSS学习笔记【2】
CSS
3 CSS布局
3.5 内边距 padding
padding:10px
给四个方向全部添加了10px内边距
给一个方向单独设置
padding-top
padding-right
padding-bottom
padding-left
4 背景
background
背景颜色: red
背景图片: url() ()里面写图片路径
注:图片作为内容可 ...
CSS学习(1)
CSS学习
CSS是层叠样式表(Cascading Style Sheets)的简称。
有时候也会称之为CSS样式表或级联样式表。
CSS也是一种标记语言。
CSS主要设置HTML页面中的文本内容、图片的外形以及版面的布局和外观显示样式。
HTML可以专注去做结构,CSS用来做样式。
CSS的语法规范
CSS由(1)选择器和(2)声明的样式组成,一般写在head中 ...
Dreamweaver基础教程:学习CSS
目录CSS 简介CSS 语法Id 和 Classid 选择器class 选择器CSS 创建外部样式表内部样式表内联样式多重样式多重样式优先级背景(background)背景颜色背景图像background-repeatbackground-positionbackground-attachment简写属性文本格式文本颜色(color)对齐方式(text-align)文本修饰(text-decoration)文本转换(text-tr ...
CSS学习35-CSS3的新特性
CSS3 的新特性
1. CSS3 的现状
新增的 CSS3 特性有兼容性问题,ie9+才支持
移动端支持优于 PC 端
不断改进中
应用相对广泛
现阶段主要学习:新增选择器和盒子模型以及其他特性
2. CSS3 新增选择器
CSS3 给我们新增了选择器,可以更加便捷,更加自由的选择目标元素。
属性选择器
结构伪类选择器
伪元素选择器
2.1 属性 ...
uniGUI学习之自定义CSS在Delphi里设置属性
uniGUI学习之uniButton设置图标+扁平化CSS(34) 2]uniButton扁平化CSS panel圆角 //自定义CSS在uniGUI 基本操作 控件CLS和ServerModule.CustomCSS都要修改CSS
uniGUI学习之UniStringGrid只某行内容的字体颜色(35) &nbs ...
02-CSS初级学习笔记
一.CSS简介
CSS说明:
一种描述HTML文档样式的语言,具体如下:
CSS 指的是层叠样式表 (Cascading Style Sheets)--也称级联样式表
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中
...
CSS学习23-定位
CSS定位
1. 为什么需要定位
浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子。
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置,并且可以压住其他盒子。
2. 定位组成
定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。
定位 = 定位模式 + 边 ...