学习前端第二天之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 ...
随机推荐
- Java FTP客户端开源类库 edtFTPj
edtFTPj/Free是免费的流行的Java FTP库,全球公司依靠edtFTPj /Free 为它们的Java应用程序添加FTP客户端功能. (收费的支持SFTP.FTPS的edtFTPj/PRO ...
- 解决报错Fatal error in launcher
换电脑重装python,打算安装第三方库的时候出现错误: Fatal error in launcher 然而在网上搜到的大多数是解决 —— Fatal error in launcher: Unab ...
- LomBok插件--模型类注解
Data注解,ToString注解都是Lombok提供的注解. Lombok是一个实用的java工具,使用它可以消除java代码的臃肿,Lombok提供一系列的注解,使用这些注解可 以不用定义gett ...
- python之selenium多窗口切换
前提: 在页面操作过程中有时候点击某个链接会弹出新的窗口,这就需要主机切换到新打开的窗口上.WebDriver提供了switch_to.window()方法,可以实现在不同的窗口之间切换. 内容: 以 ...
- Matlab求微分方程的符号解1
一.常微分方程的求解 例1. 例2. 例3. 通常我们使用syms 和dsolve来求解: first: second:表示 third:如果有必要 功能函数diff可以完成一元或多元函数任意阶数的微 ...
- arduino系列文章
arduino系列文章 1.Arduino基础入门篇-进入Arduino的世界 2.关于使用Arduino做开发的理解 3.详解Arduino Uno开发板的引脚分配图及定义(重要且基础) 4.Ard ...
- fastjson带泛型反序列化的用法
这个问题之前就遇到了,虽然猜到有现成解决办法,但是一直没有正面解决,今天找到了解决方案,mark一下. 主要就是一个TypeReference的使用. 直接上代码比较容易看懂. 1.泛型 public ...
- css设置滚动条并显示或隐藏
看效果,没有滚动条,超出div,开发中肯定不行. 有滚动条 最后就是想隐藏滚动条 代码 有滚动条并显示 <!DOCTYPE html> <html lang="en&quo ...
- 码云、coding拉取项目代码
1.git init 2.git remote add origin "你的码云或coding项目地址(ssh或https)" 3.git pull origin master
- centOS服务器-firewall防火墙开放端口
前言 日常开发中,我们常常会因为服务器各种端口未开放出现各种问题,下面我们就来简单了解下服务器上的端口开放!!! 作为一个后台开发,日常接触最多的除了代码就是服务器了: 产品:谁谁, 线上有个功能报错 ...