CSS学习笔记
CSS学习笔记
一.CSS简介
1.什么是CSS
CSS:Cascading Style Sheet层叠样式表
是一组样式设置规则,用于控制页面的外观样式
2.为什么使用CSS
实现内容与样式的分离
样式复用,便于维护
页面的精确控制,是页面更精美
3.CSS的作用
页面外观美化
布局和定位
二.CSS的基本用法
1.CSS基本语法
<head>
<style type="text/css">
...
HTM、CSS学习总结
基础
动作
link 正常
visited 已阅
hover 停留
active 正点
列表
列表：
list-style-type 标号类型
list-style-position 标号位置
list-style-image 图标url("")
表格
表格
border-collaspse:collapse 合并
选择器
选择器
tr:nth-child(odd奇|even偶)
div:nth-child(1);
注意
margin垂直方向会合并
清除图片、a标签空隙
fo ...
前端学习(13)~css学习(七)：浮动
文本主要内容
标准文档流
标准文档流的特性
行内元素和块级元素
行内元素和块级元素的相互转换
浮动的性质
浮动的清除
浏览器的兼容性问题
浮动中margin相关
关于margin的IE6兼容问题
标准文档流
标准文档流的特性
（1）空白折叠现象：
无论多少个空格、换行、tab，都会折叠为一个空格。
（2）高矮不齐，底边对齐：
...
前端学习(12)~css学习(六)：盒模型详解
盒子模型
盒子模型，英文即box model。无论是div、span、还是a都是盒子。
但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。
盒子中的区域
一个盒子中主要的属性就5个：
width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding： ...
css盒模型—逆战班学习总结
在css中，可以把元素看成一个盒子，就是盒模型，用盒模型可以控制元素之间的位置关系。
盒模型组成由里到外为：concent（内容）+padding（内边距）+border（边框）+margin（外边距）
border普通写法：border-width（宽度）border-style（线型）border-color（颜色）
复合写法：b ...
css学习笔记（更新中）
css网页美容师
写于<head>中的<style>
字体设置：{font:font-style font-weight font-size font-family}
选择器：
一、标签选择器
p h1 span div
二、类选择器
<head>
.自己设定名称{属性一：值 属性二：值；}
<body> <class="自己设定名称 ">
三、多类名选择器
.one,two,three 先后顺序无关
<div c ...
学习CSS之用CSS实现时钟效果
一、机械时钟
1.最终效果
用 CSS 绘制的机械时钟效果如下：
HTML 中代码结构为：
<body>
<div class="clock">
<ul class="min"></ul>
<ul class="hour"></ul>
&nb ...
前端学习(9)~css学习(三)：样式表和选择器
本文主要内容
CSS概述
CSS和HTML结合的三种方式：行内样式表、内嵌样式表、外部样式表
CSS四种基本选择器：标签选择器、类选择器、ID选择器、通用选择器
CSS几种扩展选择器：后代选择器、交集选择器、并集选择器
CSS样式优先级
CSS 概述
CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样 ...
11种常用css样式学习大结局滚动条与显示隐藏
滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/*左右滚动*/overflow: hidden;/*截取*/overflow: auto;/*自动*/显示与隐藏可以用display/* display: none; *//* display: block; *//* display: inline-block; */visibility显示与 ...
11种常用css样式之表格和定位样式学习
table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4缺一带你了解相对还是绝对抑或是固定定位，实现div绝对居中法/*父定位子绝对，子的坐标系是父的左上角；*/绝对定位和相对定位的相同点:脱离文档流，都在文档流的上方;不同 ...
11种常用css样式之鼠标、列表和尺寸样式学习
鼠标cursor常见样式crosshair;/*十字形状*/cursor:pointer;/*小手形状*/cursor:wait;/*等待形状*/cursor:text;/*默认 文本形状*/cursor:default;/*箭头指示形状*/cursor:help;/*帮助形状*/ 列表(list-style-type):none/*把列表前面的选项去除*/disc/*实心*/circle/*空心*/square/*方块*/decimal/*序列*/lower-roman/*小写罗 ...
11种常用css样式之border学习
边框border通常简写为"border:1px solid red;"但其实一个完整的border边框其实是由1.border-width/*边框宽度*/,2.border-style/*边框样式*/,3.border-color/*边框色彩*/三大属性构成构成;
border边框方位分为border-top/*边框上方*/border-bottom/*边框底部*/border-left/*边框左边*/border-right/*边框右边*/;
边框属性样 ...
11种常用css样式之background学习
background如何简写？如何在背景图像不变的情况下，依旧实现页面文字滚动，为之奈何？别担心，快用background-attachment: fixed;/*固定定位*/常用的background样式如下，1.background-color2.background-image3.background-repeat4.background-attachment5.background-position，废话不多扯，直接代码页面展示：
1 <!DOC ...
学习css常用基本层级伪类属性选择器
常见的css选择器包含：常用选择器、基本选择器、层级选择器、伪类选择器、属性选择器，其中常用选择器分为：1.html选择符*{}//给页面上所有的标签设置模式；2.类选择符.hcls{}//给class是hcls的一类标签设置模式；3.id选择符#h3{}//给id是h3的标签设置样式；4.关联选择符#div h1、#div h1.ljhcls；5.div,h1,pmspan,button{} ...
HTML学习-CSS
1、css语法
(1) 可以将css样式编写到head中的style标签里，将样式表编写的style标签中，然后通过css选择器选中指定元素
<style type="text/css">
p{
color:red;
f ...
css框架学习
css重新学习
1.css的语法自行百度没什么可以说的。
2.css的选择器
（1）类选择器 ：class用法是，.h1{color:red}
（2）id选择器 ：id用法是，#h1{height:300px}
（3）符合选择器 : 用法是 .h1 img{height:400px; width:300px}
3.css的样式：
背景，文本，字体，链接，表格
背景：background-color
文本：有一些不是常用的就 ...
前端学习笔记-CSS
CSS的引入方式：
1、内嵌式引入：在标签内直接使用style属性，每个样式使用分号隔开。
1 <div style="color: red;font-size:25px ;
2 font-family: 'Microsoft Yahei';line-height: 50px">
3 窗前明月光，<br />
4 疑是地上霜。<br />
5 举头望明月，<br />
6 低头思故乡。<b ...
HTML与CSS学习笔记(3)
1、float浮动
脱离文档流：沿着父容器靠左或者靠右进行排列
文档流 文档流是文档可显示对象在排列时所占用的位置
float特性 left、right、none float注意点： 只会影响后面的元素,对于浮动元素之前的元素是不造成任何影响的 内容默认提升半层，可实现图文混排样式 默认宽 ...
HTML与CSS学习笔记(2)
1、CSS背景样式？
background-color 背景色
background-image 背景图
url（背景地址）
默认：会水平垂直铺满背景图
background-repeat 平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
repeat（x和y都进行平铺，默认值）
no-repeat 都不平铺
background-position 背景位置
x y 如果为正数：图片就会往右和下进行偏移；如果为负 ...
HTML&CSS学习笔记
学习总结：重要三部分（CSS规则，盒子，布局）
一、常见标签
块级标签/内联标签
什么是块级标签：
1、独占用一行，不和其他元素同在一行上
2、能设置宽高
块级标签：p、h1-h6、ul、li、dl、dt、dd
什么是内联标签：
1、不会独占一行，紧跟在其他内联标签后面
2、不能设置宽度
内联标签：a、span、input、img等
...
