CSS入门基础学习一
一、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入门基础学习一的更多相关文章
- CSS入门基础学习二
我们下午继续学习CSS的入门基础,搬上你的小板凳赶快进入吧! 一.背景(background) Background-color:背景颜色 background-image (背景图片) backgr ...
- 第六十九节,css入门基础
css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...
- Python入门基础学习 三
Python入门基础学习 三 数据类型 Python区分整型和浮点型依靠的是小数点,有小数点就是浮点型. e记法:e就是10的意思,是一种科学的计数法,15000=1.5e4 布尔类型是一种特殊的整形 ...
- Python入门基础学习 二
Python入门基础学习 二 猜数字小游戏进阶版 修改建议: 猜错的时候程序可以给出提示,告诉用户猜测的数字偏大还是偏小: 没运行一次程序只能猜测一次,应该提供多次机会给用户猜测: 每次运行程序,答案 ...
- Python入门基础学习 一
Python入门基础学习 一 Python下载及安装 下载地址:https://www.python.org/,选择最新的版本下载 稍等一会,安装完成. 简单语句 从idle启动Python:IDLE ...
- CSS零基础学习笔记.
酸菜记 之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PH ...
- 【CSS入门基础,有需要的看过来哦】心境,心静,不轻言放弃!---致CSS
整理一下近一周学习的有关CSS的基础知识笔记: CSS语法必须写在<style>标签中哦~/*注释*/ [CSS常用背景属性]background background-color:背景色 ...
- CSS的基础学习
CSS学习 --------学习资源 http://www.csszengarden.com/ CSS语法检查http://jigsaw.w3.org/css-validator/ 配置CSS的方法: ...
- 学起来 —— CSS 入门基础
Hello,大家好! 小女来更博啦!CSS福利送上~~~ 首先给大家介绍一下CSS到底是什么? 一.CSS概念 W3C规范中,要求有三条:一 为"两个分离",二 为语言遵循语义化, ...
随机推荐
- GMSSL在Window下的编译
因为工作需要用到SM2算法加解密,网络上找一圈,没有合用的,还被骗了一堆积分. 无奈只得自行编译,从GITHUB的GMSSL下载到最新的SSL库,VS2012下编译踩了不少坑,记录一下 GITHUB链 ...
- DataFrame 结构
概念 DataFrame 是表格型的数据结构 ,DataFrame 本质上可以看做是由series 组成的字典, 它既有行索引,也有列索引. 它并不是列表,也不是字典,.
- linux优化
优化linux启动项 1. 使用ntsysv工具讲不需要的服务关闭 2. 默认启动服务可以只保留必要的服务 3. free -m 以m为单位 4. 删除不必要的用户: 5. cp /etc/passw ...
- 安卓手机作为中继器-连接Wifi共享该Wifi给PC和手机
工具 routernet.apk
- spring-data-redis的使用/redis缓存
1.导入依赖 <properties> <junit.version>4.12</junit.version> <spring.version>4.2. ...
- Count Color poj2777 线段树
Count Color poj2777 线段树 题意 有一个长木板,现在往上面在一定区间内刷颜色,后来刷的颜色会掩盖掉前面刷的颜色,问每次一定区间内可以看到多少种颜色. 解题思路 这里使用线段树,因为 ...
- 漫漫人生路,我们该何去何从! Python让我找到了方向
互联网寒冬 2017年冬天,是我人生中最难熬的一个冬天,其实2017年的冬天并不算太冷,比这冬日的寒风还要严寒的要属这所谓的"互联网寒冬"吧!各大厂裁员的消息充斥着互联网,互联网表 ...
- 知乎使用selenium反爬虫的解决方案
from selenium.webdriver import Chrome from selenium.webdriver import ChromeOptions option = ChromeOp ...
- Pandas 时间序列处理
目录 Pandas 时间序列处理 1 Python 的日期和时间处理 1.1 常用模块 1.2 字符串和 datetime 转换 2 Pandas 的时间处理及操作 2.1 创建与基础操作 2.2 时 ...
- git Windows终端安装教程
1.下载网址:https://gitforwindows.org/ 2.双击压缩包出现: 3.点击下一步后,选择安装路径: 根据自己的需求选择路径 4.选择安装的组件,建议全选 [每一条解析:] Ad ...