1.css基本样式讲解

1.1 css背景
background-attachment:背景图像是否固定或者随着页面的其余部分滚动
background-color:设置元素的背景颜色
background-image:把图片设置为背景
background-position:设置背景图片的起始位置
background-repeat:设置背景图片是否及如何重复
background-size:规定背景图片的尺寸
background-orgin:规定图片的定位区域
background-clip:规定背景的绘制区域
1.2 css文本
color :文本颜色
direction :文本方向
line-height :行高
letter-spacing: 字符间距
text-align :对齐元素
text-decoration :向文本添加修饰
text-indent :缩进元素中文本首行
text-transform :元素中的字母
unicode-bidi :设置文本方向
white-space :元素中空白的处理方式
word-spacing :字间距
text-wrap:自动换行
text-shadow:向文本添加阴影
1.3css字体
font-family :设置字体系列
font-size :设置字体尺寸
font-style :设置字体风格
fongt-variant: 以小型大写字体或正常字体显示文本
font-weight: 设置字体的粗细
1.4 css链接
a:link 普通的、未被访问的链接
a:visited 用户已经访问的链接
a:hover 鼠标指针位于链接的上方
a:active 链接被点击的时刻
text-decoration:这个属性大多用于去掉链接中的下划线
background-color:背景颜色
1.5 css列表
CSS列表属性可以灵活的放置、改变标志,或者将图像作为列表项标志
list-style :简写列表项
list-style-image :列表项图像
list-style-position: 列表项标志位置
list-style-type :列表类型
1.6 css表格
表格边框:

#tb,th,td,tr{
border: 1px solid blue;
}

折叠边框:

#tb{
border-collapse: collapse;
}

1.7 css轮廓
outline :设置轮廓属性
outline-color :设置轮廓的颜色
outline-style :设置轮廓的样式
outline-width :设置轮廓的宽度

2.css盒子模型

内边距:
内容外部,边框内部
padding 设置所有边距
padding-bottom、left、right、top 单独设置某个方向的边距
边框:
可以创建出效果出色的边框,并且可以用于任何元素
border-style:定义了10种样式
border-(top,bottom,left,right)-style:定义单边样式
border-width:边框宽度设置
border-(top,bottom,right,left)-width 单边框宽度
border-color 边框颜色
border-(top,left,bottom,right)-color 单边框颜色
CSS3边框
border-radius 圆角边框
box-shadow 边框阴影
border-image 边框图片
外边距:
margin 整体外边距
margin-(top,bottom,left,right) 单边外边距
外边距合并:就是一个叠加的概念

3.css定位与浮动

css定位:
position:static、relative、absolute、fixed;
top
left
right
bottom
overflow
….
css浮动:
float属性:left,right,none,inherit
clear属性:去掉浮动属性
left,right:去掉左右浮动
both:左右两侧浮动均去掉
inherit:从父级继承来clear值

4.css选择器

派生选择器:

li strong{
color:red;
}

具体制定列表项里的strong标签效果,已经被定义好的效果是不会被覆盖。

id选择器:

#id {
color:red;
}

id选择器可以和派生选择器组合使用,id选择器不好与id组合使用

类选择器:

.pclass{
color:red;
}

类选择器也可以和派生选择器进行组合使用

属性选择器:
缺省属性选择器:

[title]{
color:red;
}

带名字的属性选择器:

[title=te]{
color:red;
}

在IE6及更低版本,不支持属性选择器
属性选择器必须完全匹配才会起作用

子元素选择器:
采用>符号,只是只能用一级一级定位

相邻兄弟选择器:
标签+标签的形式,这个只要做一个简单的了解即可

CSS基础知识学习笔记的更多相关文章

  1. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  2. python之 前端HTML/CSS基础知识学习笔记

    1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </ht ...

  3. Objective-c基础知识学习笔记

    Objective-c基础知识学习笔记(一) 一直有记录笔记的习惯.但非常久没分享一些东西了,正好上半年開始学习IOS了,如今有空写点.因开发须要,公司特意为我们配置了几台新MAC.还让我们自学了2周 ...

  4. java基础知识学习笔记

    本文知识点以js为参照.对比分析得出笔记.JavaScript之所以叫JavaScript是打算借助java推广自己.虽然都是开发语言,但JavaScript一开始主要运行在 客户端,而java主要运 ...

  5. jsp学习---css基础知识学习,float,position,padding,div,margin

    1.常用页面布局 效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  6. jquery基础知识学习笔记

    jquery是一个js库/常用版本是jjquery-1.7.2.js/这个版本主要是用来做开放用途 做产品的时候是用它的min版本.玩jquery的时候,不管干啥都要花钱(美元)   注意点: 1.s ...

  7. 传智播客 Html基础知识学习笔记

    HTML基础 <p></p>标志对用来创建一个段落,,<p>标志还可以使用align属性, 它用来说明对齐方式 语法是:<p align="&quo ...

  8. 传智播客 Html基础知识学习笔记2

    一.<select>标签 用来创建类似于WinForm中的ComboBox(下拉列表)或者LisBox 如果size大于1就是LisBox,否则就是ComboBox; <select ...

  9. Vue基础知识学习笔记

    一.环境搭建1.安装nodejs ((https://nodejs.org/en/)2.安装脚手架 npm install --global vue-cli /cnmp install --globa ...

随机推荐

  1. 初次尝试ColumnStore Index

    1.首先使用非聚集索引 SET STATISTICS IO ON SET STATISTICS TIME ON SELECT MemberId , MAX(AddDT) AS RecentSucDT ...

  2. jquery对象与js对象的相互转换

    jQuery对象转成DOM对象: 两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index); (1)jQuery对象是一个数据对象,可以通过[index]的方法,来得 ...

  3. 20150323--MVC

    MVC: Model view(视图层,模板) Control(控制层) 三层:数据访问,商业逻辑,用户界面(Webform,MVC). 服务端无状态:接受请求,返回页面,每次请求并返回界面,前后不是 ...

  4. HTML特殊字符编码大全

    HTML特殊字符编码大全:往网页中输入特殊字符,需在html代码中加入以&开头的字母组合或以&#开头的数字.下面就是以字母或数字表示的 特殊符号大全 ´ © © > > µ ...

  5. linux 系统运行级别及修改[转]

    Linux运行级别从0-6,共7个. 0:关机.不能将系统缺省运行级别设置为0,否则无法启动. 1:单用户模式,只允许root用户对系统进行维护. 2:多用户模式,但不能使用NFS(相当于Window ...

  6. (一)Qt界面设计布局

    Qt提供四种布局: 这种布局生成的格局比较单一,这时候需要另外两个填充控件,来生成整行或整列的格式. 注意:使用Spacers控件时,必须要放在layouts中的布局中,否则无法保存. 示例: 1.往 ...

  7. ListBox复选框拓展

    Toolkit的LongListMutiSelector的复选框功能,想必许多人都需要吧!然而系统本身控件ListBox虽然也有多选功能,可是外观上却缺乏复选框,选择效果只是颜色变化.于是在上一个项目 ...

  8. Zedboard VmodCAM PIN Constraint

    自己画了一块FMC-VHDCI四层板,外接VmodCAM,接口定义如下 #CAMA PIN CONSTRACT NET "CAMA_D_I[7]" LOC = T17 | IOST ...

  9. Eclipse导入android包错误

    错误提示:Invalid project description… 解决方案:假设你的工作空间是workshop,那么你可以在你的workshop下新建一个文件夹,然后放入你的包,再在Eclipse中 ...

  10. Spannable相关方法

    实现文本链接 其中tv是TextView类型的控件.只需写java代码即可实现链接,无需在xml文件中进行其他的设置. SpannableString spanTxt = new SpannableS ...