整理一下近一周学习的有关CSS的基础知识笔记：

CSS语法必须写在<style>标签中哦~
/*注释*/

【CSS常用背景属性】background

background-color:背景色

background-image:背景图,background-image: url(图片地址相对路径);背景图和背景色同时存在时，背景图会覆盖背景色

background-repeat：背景图重复方式 ，no-repeat不平铺 repeat平铺(默认) repeat-x水平平铺 repeat-y垂直平铺

background-size:背景图大小。

【指定宽度高度】
>>> 宽高的写法，第一个属性值为宽度，第二个属性值为高度，可以：①直接写像素 ②写百分比（父容器宽高的百分比）
>>> 当只有一个属性值时，默认为宽度。高度等比缩放。
当有两个属性值时，会按照指定的高度宽度进行压缩/拉伸显示。

【其他属性值】
>>> contain:图片等比缩放，缩放到宽或高的某一边等于父容器的宽高，另一边按照图片大小缩放（可能导致部分空余区域无法覆盖）
>>> cover:图片等比缩放，使背景图像完全覆盖背景区域。(可能导致背景图部分区域无法显示)

background-position：位置坐标、偏移量
>>> 指定位置：left/center/right top/center/bottom
当只写一个属性值时，另一个默认居中
>>> 填写坐标：水平位置 垂直位置 (像素或百分比形式)
① 当只写一个属性值时，默认写的为水平方向，则垂直居中
② 当使用像素时：图片的左上角往各个方向移动的实际距离
水平方向：正数右移 负数左移 垂直方法：正数下移 负数上移
(左负有正 上负下正)
③ 当使用百分数时，一般只能是正数。代表去掉图片后，剩余空白距离的分布比例。例如 background-position：30%; 水平方向去掉图片后，剩余区域3:7分

[颜色常用单位]
* 十六进制：#ffffff
* 颜色名称：red
* RGB颜色：RGB（255，255，255）
* ＲＧＢＡ：第四位数，表示透明度。可选值0~1

 [CSS常用文本属性]
1、字体、字号：
font-weight:字体的粗细，
可选属性值：bold加粗 lighter细体 100~900数值(400正常，700 bold)

font-size:字体大小 **PX **%（浏览器默认字体大小的百分比，绝大部分默认16px）

font-family:字体族，设置字体。
>>>多个字体样式间用逗号分隔，浏览器解析时，会从左往右依次解析，选择可用字体。
>>>一般前面使用具体字体名称，最后一个使用字体族类名称。
（常用字体族名称：衬线体serif 非衬线体sans-serif(常用) 等宽体Monospace）
>>>例如：font-family:Arial, 'Microsoft Yahei', sans-serif;

font-style:字体样式,正常(normal) 斜体(italic)

font-variant：small-caps; 将字母转为小型大写字体。

(了解)font缩写形式：font-style font-variant font-weight font-size line-height font-family
>>> 使用注意事项 ：
① 顺序必须严格按照上述顺序；
② 多个样式之间用空格分割，而且font-size/line-height 必须作为一对用/分割
③ font-size和font-family必须指定，其他样式不指定将采用默认样式显示；
>>> 例如：font:italic bold 75%/1.8 'Microsoft Yahei', sans-serif;
斜体 加粗 字号/行高 字体族(微软雅黑，非衬线字体族)

2、字体颜色：
color:字体颜色
opacity:透明度,0~1之间的数字。 调整时控件以及子控件均会透明，而使用rgba调整时，只会时本控件透明，子控件不会发生透明度变化。

3、行距、对齐等：
line-height:行高 ① 像素单位 48px ② 不带px 正常行高的倍数 ③百分数 同2
>>> 典型应用，调整控件中文垂直居中的方式：控件的height=控件的line-height

text-align:块级元素中行级元素的水平对齐方式 left center right

letter-spacing:字符间距,字与字之间的间距

text-decoration:文本修饰 下划线underline、删除线line-through、上划线overline、none


overflow:控制超出范围文本的显示方式(auto 根据文字多少自动显示滚动条，
scroll始终显示滚动条， hidden 超出范围文本隐藏)
可以通过overflow-x overflow-y分别设置水平垂直方向
text-overflow:设置多余文字的显示方式 ：clip裁剪掉 ellipsis省略号

>>>【重点】让每行多余文字显示省略号：
① white-space: nowrap; 如果是中文，需设置行末不断行
② overflow: hidden; 设置控件超出范围隐藏
③ text-overflow: ellipsis; 设置多余文本省略号显示

white-space: nowrap; 设置行末不断行显示

word-break: 浏览器默认在空格处断行，当一个单词长度超出范围时，会不断行显示， break-all 允许在单词内换行。

text-shadow:文本阴影，有四个属性值：
①水平阴影距离 必选，数值越大，阴影右移
②垂直阴影距离 必选，数值越大，阴影下移
③阴影模糊距离 可选，数值越大，阴影越模糊。默认为0，不模糊
④阴影颜色 可选，默认为黑色

text-indent:首行缩进，可用像素值调整缩进大小

text-stroke: -webkit-text-stroke: 0.2px #008000; 描边的粗细，描边的颜色

CSS常用选择器

【通用选择器】
1、写法：*{}
2、作用：选中页面中的所有的HTML标签
3、优先级最低

*{
/*background-color:red;*/
}

【标签选择器】
1、写法：HTML标签名{}
2、作用：选中所有对应的HTML标签，并修改其样式

li{
color: red;
font-size: 36px;
}

【选择器命名规范】
1、只能是字母，数字，下划线
2、开头不能是数字


【类选择器class选择器】
1、写法：.class名{}
2、调用：在需要修改样式的HTML标签上，
    使用class="选择器名"
3、优先级：当作用于同一层时，class选择器>标签选择器

.list{
color: blue;
}
【ID选择器】
1、写法：#选择器名{}
2、调用：在需要修改样式的HTML标签上，使用id="选择器名"
3、优先级：同一层时，id选择器>class选择器
4、ID选择器是唯一的！同一页面严禁出现同名ID！！！

#first{
color: green;
}

【后代选择器】
1、写法：选择器1 选择器2 .....选择器N{}
2、生效规则：选择器N必须是选择器N-1的后代

【子代选择器】
1、写法：选择器1>选择器2>……>选择器N{}
2、生效规则：选择器2必须是选择器1的【直接子代】……

div>ul>li{
background-color:yellow;
}

【交集选择器】
1、写法：选择器1  选择器2  ……  选择器N{}
2、生效规则：必须同时满足所有选择器，才会生效

li.list#first{
background-color:blueviolet;
}

【并集选择器】
1、写法：选择器1，选择器2，……，选择器N{}
2、生效规则：满足任意一个选择器，均可生效

.list#first{
background-color:greenyellow;
}

[选择器优先级]
1、就近原则：近者优先
2、当作用于同一层时：可用权重计算
权重划分：标签选择器 1
class选择器 10
ID选择器 100
行级样式表style="" 1000
#ul .li .li2 li{} 优先级权重121
li .li1 .li2 .lis2{} 优先级权重31
#ul #li li{} 优先级权重201

【三种使用CSS的方式】
1、行内样式表：直接在HTML开始标签中使用style=""的方式引用
特点：将CSS代码与HTML代码完全糅杂在一起，
不符合W3C关于内容与表现分离的要求。不利于样式复用；
优先级：最高。
2、内部样式表：在<head></head>中，
使用<style type="textx/css"></style>方式使用
特点：将CSS代码与HTML代码分离，但是没有彻底分离CSS文件与HTML文件，
不利于多页面复用样式。
3、外部样式表：使用link标签链接CSS文件。
<link rel="stylesheet" type="text/caa" href="css/0309CSS"/>
特点：实现了ＣＳＳ与ＨＴＭＬ的彻底分离，有利于样式复用及后期维护。
-->

【伪类选择器】
1、写法：选择器名：伪类状态{}
常见伪类状态
* ：link 未访问
* ：visitied 已访问
* ：hover 鼠标指上状态
* ：active 激活选定状态
注：当超链接同时具有以上四种状态，
则选择器必须按照上述序列排列
* ：focus 获得焦点，常用于input

【超链接常见的四种状态】
* a:link
* a:visitied
* a:hover
* a:active

【CSS入门基础，有需要的看过来哦】心境，心静，不轻言放弃！---致CSS的更多相关文章

  1. 第六十九节，css入门基础

    css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...

  2. CSS入门基础学习二

    我们下午继续学习CSS的入门基础,搬上你的小板凳赶快进入吧! 一.背景(background) Background-color:背景颜色 background-image (背景图片) backgr ...

  3. 学起来 —— CSS 入门基础

    Hello,大家好! 小女来更博啦!CSS福利送上~~~ 首先给大家介绍一下CSS到底是什么? 一.CSS概念 W3C规范中,要求有三条:一 为"两个分离",二 为语言遵循语义化, ...

  4. CSS 入门基础

    一.CSS 介绍什么是CSS CSS 指的是层叠样式表(Cascading StyleSheet).在网页制作时采用层叠样式表技术, 可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控 ...

  5. CSS入门基础

    认识CSS 传统HTML设计网页版面的缺点 CSS的特点 CSS的排版样式 13.1 认识CSS CSS的英文全名是Cascading Style Sheets,中文可翻译为串接式排版样式,并且CSS ...

  6. 13 ，CSS 入门基础,行内排版内嵌式排版和外部排版样式

    1.认识 CSS 2.传统 HTML 设计网页版面的缺点 3.CSS 的特点 4.CSS 的排版样式 13.1 认识CSS CSS的英文全名是 Cascading Style Sheets,中文可翻译 ...

  7. css入门基础知识

    一.CSS常用选择器 /*CSS注释*/ /*CSS修改页面中的所有标签必须借助选择器选中. 选择器中可以写多对CSS属性:每个属性名与属性值之间用:分隔,多对属性之间,必须用;分隔 选择器{ 属性1 ...

  8. HTML中CSS入门基础

    HTML.CSS 实用css有三种格式:内嵌:内联:外部: 分类:内联:写在标记的属性位置,优先级最高,重用性最差内嵌:写在页面的head中,优先级第二,重用性一般外部:写在一个以css结尾的文件中, ...

  9. CSS入门基础学习一

    一.CSS样式 1.什么是CSS: CSS是指层叠样式表(Cascading Style Sheels),CSS通常为CSS样式表或层叠样式表,主要用于设置HTML文本内容,以及版本面的布局等 2.H ...

随机推荐

  1. Java面向对象核心技能

    1.封装 封装是面向对象的三大特性之一,就是将类的状态信息隐藏在类内部,不允许外部程序直接访问,而通过该类提供的方法来实现对隐藏信息的操作和访问. 封装的好处:隐藏类的实现细节:让使用者只能通过程序规 ...

  2. 老李谈HTTP1.1的长连接

    老李谈HTTP1.1的长连接   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:9088214 ...

  3. Zookeeper3.4.9分布式集群安装

    一.依赖文件安装 1.1 JDK 参见博文:http://www.cnblogs.com/liugh/p/6623530.html 二.文件准备 2.1 文件名称 zookeeper-3.4.9.ta ...

  4. zookeeper入门与实践

    概述 Zookeeper是Hadoop的一个子项目,它是分布式系统中的协调系统,可提供的服务主要有:配置服务.名字服务.分布式同步.组服务等. 它有如下的一些特点: 简单 Zookeeper的核心是一 ...

  5. jmeter、java自动化学习地址

    自动化学习社区地址:http://www.hordehome.com/c/14-category jmeter学习地址(范丰平博客):http://www.cnblogs.com/fengpingfa ...

  6. JavaScript引用是如何工作的

    原文链接:https://www.sitepoint.com/how-javascript-references-work/ 摘要:JavaScript中没有指针,并且JavaScript中的引用与我 ...

  7. python 实例方法，类方法和静态方法

    在学习python代码时,看到有的类的方法中第一参数是cls,有的是self,经过了解得知,python并没有对类中方法的第一个参数名字做限制,可以是self,也可以是cls,不过根据人们的惯用用法, ...

  8. 基于MVC和Bootstrap的权限框架解决方案 二．添加增删改查按钮

    上一期我们已经搭建了框架并且加入了列表的显示, 本期我们来加入增删改查按钮 整体效果如下 HTML部分,在HTML中找到中意的按钮按查看元素,复制HTML代码放入工程中 <a class=&qu ...

  9. MYSQL 行转列 以及基本的聚合函数count，与group by 以及distinct组合使用

    在统计查询中,经常会用到count函数,这里是基础的 MYSQL 行转列 以及基本的聚合函数count,与group by 以及distinct组合使用 -- 创建表 CREATE TABLE `tb ...

  10. memcached+tomcat转发forward时 sessionid一直变化的问题

    今天遇到了一个很奇怪的问题, 我在tomcat过滤器 中, 对请求过来的静态资源及html页面做了forword转发操作,核心代码如下: private void redirectMobile(Htt ...