学习前端第二天之css层叠样式
一、设置样式公式
选择器 {属性:值;}
二、font 设置四大操作
font-size:字体大小 (以像素为单位)
font-weight:字体粗细
font-family:字体 ( 可直接跟字体或者16进制 如:"微软雅黑")
font-style: 字体风格 (em 和i 标签也能倾斜)
normal:正常
italic:斜体
font:综合设置字体样式
选择器 {font: font-style font-weight font-size/line-height font-family}
ps: 顺序不能更改 不需要设置的属性可以省略 必须保留font-size 和font-family
三、基础选择器
1.标签选择器(直接写标签)
p {
font: iltic 700 14px "微软雅黑"
}
2.ID选择器
定义: id="big"
调用: #big
3.类选择器
定义: class="tou"
调用: .tou
3.通配符选择器
* 值所有的标签
直接调用
* {
color: red;
}
四、链接伪类选择器 (多用于a标签 )
:link 未访问的链接
:visited 已访问的链接
:hover 鼠标移动到链接上
:active 选定的链接 (点击不松开的时候的状态)
顺序不能变 lvha 常用的就link 和hover
五、结构位置伪类选择器
:first-child: 选取属于其父类元素的首个子元素的指定选择器
:last-child: 选取属于其父类元素的最后一个个子元素的指定选择器
:nth-child(n): 匹配属于其父元素的第N个子元素
nth-child(even) 选出所有偶数
nth-child(odd) 选择所有基数
:nth-last-child: 选择器匹配属于其元素的第个子元素的每个元素
六、目标伪类选择器 (多用于设置锚点的时候用)
:target
用法::target {
color: red;
}
七、css设置颜色的三种方式
1. 单词
2. 16进制
3. rgb(255,255,255)
八、css命名规范
1. 长名称或词组可以使用中横线来为选择器命名
c-orange color-orange
2. 不要用下中横线
头:header
内容:content/container
尾:footer
侧栏:sidebar
导航: nav
栏目: column
页面范围控制整体布局宽度:wrapper
左中右: left center right
登录条:loginbar
标志:logo
广告: banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航: subnav
菜单:menu
子菜单: submenu
搜索: search
友情链接: friendlink
页脚: footer
版权: copyright
滚动: scroll
标签页: tab
文章列表: list
提示信息: msg
小技巧: tips
栏目标题: title
九、行高对齐和首行缩进
text-align 水平对齐方式 (center left right)
line-align 行间距 (px为单位)
text-indent 首行缩进 (em为单位 em代表一个汉字的距离)
letter-spacing 字间距
word-spacing 单词间距
十、颜色半透明
color: rgba(255,0,0,0.5); 取值范围0-1
十一、文字阴影
h-shadow 水平阴影的位置,允许负值
v-shadow 垂直阴影的位置
blur 可选 模糊的距离
color 可选 阴影的颜色
text-shadow: 1px 11px 3px rgba(0,0,0,0.4);
十二、CSS样式表三种分类
行内式(内联样式):直接在标签内部写
<标签名 style="属性":值;"属性":值></标签名>
内部样式表(内嵌式)
写在head头部中
外部样式表 (外链式)
1.写在css文件里面
2.在head标签里用link标签引入
十二、标签三大分类
1.行内元素标签
<a> <strong> <b> <em> <i> <del> <s> <span>
特点:
1.和相邻行内元素在一行上
2.高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效
3.默认宽度就是它本身内容的宽度
4.行内元素只能容纳文本或其他行内元素(a特殊)
2.块级元素
<h1><h6><p><div><ul><ol><li>等
特点:
1.从新行开始
2.高度,行高 外边距以及内边距都可以控制
3.宽度默认是容器的100%
4.可以容纳内联元素和其它块元素
p里面不能放块级元素
3. 行内块标签
input img td 是行内显示 然后也可以改宽高
以上标签可通过display来转换
块转行内:display:inline
行内转块:display:block
块、行内转换成行内块 display:inline-block
十三、CSS复合选择器 (由两个或者两个以上的基础选择器组成)
1.交集选择器 (既 又... 的关系)
标签.class {}
2.并集选择器 (用逗号隔开)
定义的样式完全相同的标签
.class,标签
3.后代选择器用空格隔开
.class h3 {color:red;}
4.子元素选择器 (用大于号表示)
定义:class>标签 {}
5.属性选择器
选取标签带有某些特殊属性的选择器,用中括号来表示
a[title] {
color:属性;
}
input[type=text]
div[class^=font] 表示以font开头
div[class$=footer] 表示以footer结尾的
div[class*=tao] 表示包含tao所在的任意位置 伪元素选择器
p::first-letter { /*选择第一个字*/
color: red;
font-size: 30px }
p::first-line { /* 选中第一行*/
color: green;
} p::selection { /*当选中文字的时候可以变化的样式*/
color:pink;
} before和after 里面必须要有一个content
在div里插入内容
div::before {
content: "俺"
} div::after {
content: "学习了"
}
学习前端第二天之css层叠样式的更多相关文章
- CSS层叠样式选择器归纳
常用选择器 1.1 类型选择器:用来寻找特定类型的元素 标签 { 声明 } p { color:black; } h1 { font-weight:bold; } 1.2 后代选择器: 选择一个元 ...
- 从零开始学习前端开发 — 2、CSS基础
一.CSS简介 1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成 ...
- CSS层叠样式
为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表.有了CSS,html中大部 ...
- 从零开始学习前端开发 — 6、CSS布局模型
一.css布局模型 1.流动模型(Flow) 元素在不设置css样式时的布局模型,是块元素就独占一行,是内联元素就在一行逐个进行显示 2.浮动模型(Float) 使用float属性来进行网页布局,给元 ...
- 从零开始学习前端开发 — 3、CSS盒模型
★ css盒模型是css的基石,每个html标签都可以看作是一个盒模型. css盒模型是由内容(content),补白或填充(padding),边框(border),外边距(margin)四部分组成 ...
- css层叠样式初学
一.css简介 1.层叠样式表:叠加效果,不同css对同一html修饰,冲突部分,优先级高作用,不冲突部分,共同作用 2.css作用 (1)修饰html (2)替代了标签自身的颜色,字号等属性,提高复 ...
- css层叠样式优先级总结
虽然学前端最刚开始就是html+css,一直因为这些看起来太简单就没有什么总结,不过看似很简单的东西,研究起来也深不可测,问起来js可能回答的头头是道,css这么简单的东西,其中一个优先级的问题就能难 ...
- 小白学习前端---第二天 HTML的基本属性————1
一.HTML的属性 1.1基本属性 1.1.1三个基本属性 class 定义类规则或者样式规则 id 定义元素的唯一标识 stype 定义元素的样式声明 1.1.2不含三个基本属性的元素 h ...
- 第二节:Css重写样式
一丶 进入浏览器---->F12----->找到要修改的区域的Style 进行重写Css样式 二丶打开新页面 window.open("/Persitent/OtherIndex ...
随机推荐
- 使用idea进行activiti工作流开发入门学习
1.安装插件 在idea里面,activiti的插件叫actiBPM,在插件库里面把它安装好,重启idea就行了. 2.新建一个maven项目,并更改pom.xml.pom中依赖如下: <?xm ...
- 安装mysql数据库及问题解决方法
1.mysql官网下载安装包,官网地址:www.mysql.com [root@seiang software]# ll total 580020 -rw-r--r--. 1 root root 59 ...
- linux系统下的rz、sz详解
对于linux服务器来说,通常我们是通过一些ssh工具进行远程访问连接的,而对于经常使用它的人来说,少不了将文件上传下载到服务器.如何能够快速的同服务器进行文件的交互尤为重要.不然每次都打开单独的ss ...
- 断句:Store all parameters but the first passed to this function as an array
// Store all parameters but the first passed to this function as an array //除了第一个参数,把调用publish函数时的所有 ...
- JavaScript里的原型(prototype), 原型链,constructor属性,继承
① __proto__ 和 constructor 属性是 对象 所独有的. ② prototype 属性是 函数 所独有的. ** JS里函数也是引用类型的对象,所以函数也有 __proto__ 和 ...
- windows10专业版激活方法
1.首先在桌面左下角的“cortana”搜索框中输入“CMD”,待出现“命令提示符”工具时,右击选择“以管理员身份”运行. 2.此时将“以管理员身份”打开“MSDOS”窗口,在此界面中,依次输出以下命 ...
- unity模型网址
http://www.rr-sc.com/thread-16476562-1-1.html
- C4model实践总结
能看到这篇文章的人,我就不用废话给你介绍C4model.vscode.plantuml这些是什么以及怎么安装了. 0. 基本语法. 1. 创建常用模板.并保存到snippet. 2.利用关系REL控制 ...
- <marquee>滚动文字</marquee>
<marquee>滚动文字</marquee> 水平滚动: <marquee direction=">水平滚动字幕内容</marquee> 垂 ...
- utgard OPC 主要功能简介
度娘还行,尽管不好用,但所有的开发人员不懈努力地写博客,能得到很多东西! 这里向所有未谋面的博主们致敬! 搜了一堆OPC资料,在这里整理一下,用一个封装类来说明utgard的主要接口.使用了java自 ...