一、CSS样式

　　1、什么是CSS：

　　　　CSS是指层叠样式表（Cascading Style Sheels），CSS通常为CSS样式表或层叠样式表，主要用于设置HTML文本内容，以及版本面的布局等

　　2、HTML和CSS的关系：

　　　　html结构层 负责从语义的角度搭建页面结构，CSS样式层 负责从审美的角度美化页面，JavaScript行为层 负责从交互的角度提升用户体验

　　3、编写CSS

　　缺省样式（浏览器样式），可以通过设置修改浏览器的样式，所有的标签都有默认的样式

　　内联样式表：

<span style="clolor:red"></span>

　　内嵌样式表：

<head>

<style>p{color:red}</style>

</head>

　　外部样式，外联样式：新建一个文件，后缀名以.css命名（css文件）,在html页面中通过

<link rel=”stylesheet” href=””> 标签将css文件引入

　　书写方式的区别

　　　　内嵌式写法：
　　　　　　◆代码可维护性较差，没有实现css代码与html结构的完全分离
　　　　　　◆影响的范围只有当前页面
　　　　行内式写法：
　　　　　　◆代码可维护性极差，css代码和html结构没有实现分离
　　　　　　◆影响的范围只有当前标签

　　　　外联式写法：
　　　　　　◆代码可维护性高，css与html结构完全分离
　　　　　　◆影响范围广，当前整个网页站点。

　　4、CSS特性

　　　　层叠性：

　　　　　　样式的覆盖。 样式的层叠性与样式的调用顺序没有关系，与样式的定义顺序有关。层叠性发生的前提： 样式冲突

<style>

.one{

　　color: red;

}

.two{

　　color:yellow;

}

</style>

</head>

<body>

<div>

　　<p class="two one ">文字的颜色</p> 答案：黄色

</div>

</body>

　　继承性

　　　　继承性发生的前提是标签之间属于一种嵌套关系

　　　　　　☞文字颜色可以实现继承

　　　　　　☞文字大小可以实现继承

　　　　　　☞字体可以实现继承

　　　　　　☞行高可以实现继承
　　　　　　与文字有关的属性都可以 实现继承
　　　　特殊性：
　　　　　　<a href=”#”></a> 不能继承父元素中的文字颜色（层叠掉了）
　　　　　　<h1></h1> 标题标签不能继承父元素中的文字大小

　　　优先级

　　　　　优先级的特点：

　　　　　　默认样式<标签选择器<类选择器<id选择器<行内样式<!important
　　　　　　　　0 　　　　1　　　　 10　　　 100 　　 1000 　　 1000以上

　　5、常见CSS属性

　　　属性                解释             书写规范

　　　width   　　　　　　　宽度          　 width:300px;

　　　height    　　　　　 高度   　　　　　　height:300px;

　　　color    　　　　　　文本颜色（前景色）  color:red;

　　　Background-color   背景颜色    　　　　background-color:green;

　　　font-size    　　　 文字大小    　　　　font-size:34px;

　　　Text-align    　　　内容的水平对齐方式   text-align:left|center|right

　　　Text-indent    　　首行缩进    　　　　　Text-indent:2em;

　　6、CSS注释

　　　　/*需要注释的文本*/

　　　　可以单行注释也可多行注释

　　7、样式表的分类

　　　　标签选择器：　　　

a{

 color:red;

 text-decoration:none; /*超链接去掉下划线*/

}　　

　　　　　　作用：给指定的标签添加样式

　　　　　　写法：标签名{属性：值；属性：值}

　　　

　　　　类选择器：

.classname{

　　　　color:red;

　　　　　　}

　　　　　　写法：.自定义类名{属性：值} /* 类名前面的点很重要*/

　　　　　　特点：类样式表必须在相应的标签调用才生效，谁调用，谁改变。可以多个标签调用同一个类样式。同一个标签可以调用多个类样式，中间需要空格隔开。

　　　　　　类的命名规范：

　　　　　　　　◎不能使用纯数字或者数字加英文来命名类名称。
　　　　　　　　◎不推荐使用汉字来给类命名。
　　　　　　　　◎不能以特殊符号给命名（_除外）。
　　　　　　　　◎不推荐使用标签代码或者样式的属性来命名类名称。

　　　　Id选择器：

#IDname{

　　　　color:red;

   　　 }

　　　　　　写法：#自定义名称{属性：值}

　　　　　　特点：一个页面只能被调用一次，ID选择器配合JS的使用，一个标签只能调用一个ID选择器

　　　　　　ID选择器命名规范

　　　　　　　　只允许出现字母、下划线、数字，只允许以字母开头，命名没有长度的限制，但是不能出现标签名

　　　　　　注意：ID选择器的优先级非常高，所以确定整个页面唯一出现时，才可以使用ID选择器，不然优先级问题在后续的维护中不能很好修改更新

　　　　通配符选择器

*{

         padding: 0px;

         margin: 0px;

    }

　　　　　　写法：*{属性名：值}

　　　　　　　　*代表所有标签，会给所有的标签加上样式，会增加服务器和浏览器压力，不推荐使用

　　　　颜色的表达式

　　　　　　◎直接写颜色的名称
　　　　　　◎十六进制：0-ff,一共16个数值。#ff0000,前边2个数值对应的是红色，#00ff00,中间2个对应的是绿色，#0000ff,后边2个对应的是蓝色。

　　　　　　◎rgba:R:红色。 G:绿色； B:蓝色。最后一共a代表的是透明度，alpha,值是0-1.

 二、文字的属性

　　文字的属性：

　　　　font-size: 文字大小
　　　　Font-family: 设置文字字体

　　文字的连写：

{font: font-style font-weight  font-size/line-height  font-family;}/*自定义样式名称*/

　　设置字体的三种方法

　　　　1、直接写字体的中文名称

p{

            color: pink;

            font-size: 20px;

            font-family：“微软雅黑”；

        }

　　　　2、直接写字体的英文名称

div{

            color: green;

            font-family：“songti”;

            font-size: 24px;

            width: 300px;

            height: 200px;

            background-color:orange;

            text-align: center;

        }

　　　　3、写文字的unicode编码。

.p{

  font-family:"5FAE\8F6E\96C5\9ED1"

}

三、复合选择器

　　1、交集选择器（标签指定选择器）

　　　　标签.自定义名称{属性:值;}

　　2、后代选择器

　　　　选择器+空格+选择器+空格+....选择器{属性:值;}

　　3、并集选择器

　　　　选择器+，+选择器+，+选择器{属性:值;}

　　4、子元素选择器：子代选择器，是让CSS选择器智能选择儿子辈的元素

　　　　例如：h1>strong{color:red;}

　　5、层次选择器

　　6、分组选择器

　　7、属性选择器

　　　　a、简单属性选择：h1[class]{color:red;}//选择所有拥有Class属性的h1标签

　　　　b、根据属性值选择：p[id="aside"]{color:red;}//根据属性名相等选择

　　　　c、属性名全包含：p[class~="a"]{color:red;}//只要包含属性就被选择

　　　　d、属性模糊选择

　　　　　　　E[att^="val"]{sRules}//选择具有att属性属性值以val开头的字符串的E元素

　　　　　　　E[att$="val"]{sRules}//选择具有att属性属性值以val结尾的字符串的E元素

　　　　e、属性模糊匹配包含

　　　　　　　E[att*="val"]{sRules}//选择具有att属性且属性值为包含val的字符串的E元素

　　8、子元素选择器

　　9、相邻兄弟选择器

　　10、伪类选择器

　　11、伪元素选择器

　　　　通配符选择器：通配符选择器用“*”表示。他是所有选择器中作用范围最广泛的，能匹配页面中所有元素，通配符的穿透力很强，优先级会高于继承的样式会覆盖继承的样式

　　　　语法：*{属性1：属性值1；属性2：属性值2}

四、伪类

　　超链接默认状态下的样式a{}与a:link{}实现的效果是一样的

  a:link{

                属性:值;

      }

             超链接访问过后的样式

        a:visited{

                 属性:值;

             }

        鼠标放到超链接上的样式

       a:hover{

     }

        超链接激活状态下的样式

       a:active{

     }

       获取焦点（光标）的时候的样式

       :focus{

     }

CSS入门基础学习一的更多相关文章

  1. CSS入门基础学习二

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

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

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

  3. Python入门基础学习 三

    Python入门基础学习 三 数据类型 Python区分整型和浮点型依靠的是小数点,有小数点就是浮点型. e记法:e就是10的意思,是一种科学的计数法,15000=1.5e4 布尔类型是一种特殊的整形 ...

  4. Python入门基础学习 二

    Python入门基础学习 二 猜数字小游戏进阶版 修改建议: 猜错的时候程序可以给出提示,告诉用户猜测的数字偏大还是偏小: 没运行一次程序只能猜测一次,应该提供多次机会给用户猜测: 每次运行程序,答案 ...

  5. Python入门基础学习 一

    Python入门基础学习 一 Python下载及安装 下载地址:https://www.python.org/,选择最新的版本下载 稍等一会,安装完成. 简单语句 从idle启动Python:IDLE ...

  6. CSS零基础学习笔记.

    酸菜记 之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PH ...

  7. 【CSS入门基础，有需要的看过来哦】心境，心静，不轻言放弃！---致CSS

    整理一下近一周学习的有关CSS的基础知识笔记: CSS语法必须写在<style>标签中哦~/*注释*/ [CSS常用背景属性]background background-color:背景色 ...

  8. CSS的基础学习

    CSS学习 --------学习资源 http://www.csszengarden.com/ CSS语法检查http://jigsaw.w3.org/css-validator/ 配置CSS的方法: ...

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

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

随机推荐

  1. 关于崩溃报告的日志以及dump文件

    在用户使用软件的过程当中突然产生软件崩溃的问题,必须采取相关的措施去拦截崩溃产生的原因,这有助于程序员解决此类崩溃的再次发生.特别是有些难以复现的崩溃,不稳定的崩溃,更有必要去调查崩溃产生的原因.一般 ...

  2. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_05 List集合_3_LinkedList集合

    链表实现,查询慢,增删快 addFirst 集合的开头添加 push等效于addFirst addLast getFirst和getLast clear 清空后 又输出 isEmpty 不为空才去获取 ...

  3. Caffe深度学习计算框架

    Caffe | Deep Learning Framework是一个清晰而高效的深度学习框架,其作者是博士毕业于UC Berkeley的 Yangqing Jia,目前在Google工作.Caffe是 ...

  4. c语言秋季作业2

    问题 答案 这个作业属于哪个课程 C语言程序设计I 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-4/homework/8657 我在这 ...

  5. （4.30）全面了解触发器：DML、DDL、LOGON触发器

    DML.DDL.LOGON触发器 转自:https://www.cnblogs.com/seusoftware/p/9120632.html 触发器可以理解为由特定事件触发的存储过程, 和存储过程.函 ...

  6. [mysql相关集锦] 001 - mysql zip安装/The service already exists/MySQL 服务无法启动

    本随笔参考了其他博客内容,且在验证有效之下才或誊抄或摘录或加上自己经验组合而成. 参考博客: 1,https://www.jianshu.com/p/413d29b67422 2,https://bl ...

  7. [2019杭电多校第五场][hdu6628]permutation 1

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6628 题意为求字典序第k小的差异数组,差异数组p满足p[i]=a[i+1]-a[i]. 头铁的爆搜,因 ...

  8. [BZOJ1492] [NOI2007] 货币兑换Cash(cdq分治+斜率优化)

    [BZOJ1492] [NOI2007] 货币兑换Cash(cdq分治+斜率优化) 题面 分析 dp方程推导 显然,必然存在一种最优的买卖方案满足:每次买进操作使用完所有的人民币:每次卖出操作卖出所有 ...

  9. [Codeforces 1191D] Tokitsukaze, CSL and Stone Game(博弈论)

    [Codeforces 1191D] Tokitsukaze, CSL and Stone Game(博弈论) 题面 有n堆石子,两个人轮流取石子,一次只能从某堆里取一颗.如果某个人取的时候已经没有石 ...

  10. log.info（）传入多个参数的方法

    不知道项目里用的是啥 ** 版本的 log4j 居然不能传入变长参数 logger.info(String.format("%s %s %s", username, feature ...