前端开发—CSS
| CSS 基础概念 |
致命三问：
它是什么？ 层叠样式表，主要作用是对html标签进行装饰。
它的作用：再 html 框架的基础上 ，对标签内容做美化工作。
注释方法：/*单行注释*/ 多行注释同理与html
语法结构：
在HTML中使用CSS样式的三种方式
1 head 内style 标签内部直接书写css代码
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
2 link 标签引入外部css文件
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
3 直接在标签内通过style属性书写css样式、
<p style="color: red">Hello world.</p>
| 各种选择器 |
基本选择器
1 元素选择器
p {color: "red";}
2 id选择器
#i1 {
background-color: red;}
3 类选择器
.c1 {
font-size: 14px;}
p.c1 {
color: red;}
4 通用选择器
* {
color: white;}
注意：
样式类名不要用数字开头（有的浏览器不认）。
标签中的class属性如果有多个，要用空格分隔。
组合选择器
1 后代选择器
/*li内部的a标签设置字体颜色*/
li a {
color: green;}
2 儿子选择器
/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p {
font-family: "Arial Black", arial-black, cursive;}
3 毗邻选择器
/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {
margin: 5px;}
4 弟弟选择器
/*i1后面所有的兄弟p标签*/
#i1~p {
border: 2px solid royalblue;}
属性选择器
/*用于选取带有指定属性的元素。*/
p[title] {
color: red;}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
color: green;}
分类和嵌套
1 分组
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选 择器之间使用逗号分隔的分组选择器来统一设置元素样式。
div, p {
color: red;}
上面的代码为div标签和p标签统一设置字体为红色。
2 嵌套
.c1 p {
color: red;}
伪类选择器
/* 未访问的链接 */
a:link {
color: #FF0000
} /* 已访问的链接 */
a:visited {
color: #00FF00
} /* 鼠标移动到链接上 */
a:hover {
color: #FF00FF
} /* 选定的链接 */
a:active {
color: #0000FF
} /*input输入框获取焦点时样式*/
input:focus {
outline: none;
background-color: #eee;
}
伪元素选择器
first-letter
p:first-letter {
font-size: 48px;
color: red;}
before
/*在每个<p>元素之前插入内容*/
p:before {
content:"*";
color:red;}
after
/*在每个<p>元素之后插入内容*/
p:after {
content:"[?]";
color:blue;}
| 选择器的优先级 |
相同的选择器，不同的引入方式，就近原则，谁越靠近标签谁说了算。不同选择器，相同的引入方式。 行内样式 > id 选择器 > 类选择器 > 标签选择器
| 样式修改 |
列表
UL无序列表，去除固定样式：
ul {
list-style-type: none;
padding-left:;
}
前端开发—CSS的更多相关文章
- 前端开发css实战：使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- 前端开发css禁止选中文本
在我们日常的Java web前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...
- 1+x 证书 Web 前端开发 css 专项练习
官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/
- 第十一章 前端开发-css
第十一章 前端开发-css 1.1.0 css介绍 css是指层叠样式表(Cascading Style Sheets),样式定义如何显示html元素,样式通常又会存在于样式表中. css优势: 内容 ...
- web前端开发CSS命名规范参考
做为一个web前端工程师,每天接触HTML.css就像吃饭一样,但是作为一名合作.优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规 ...
- 前端开发CSS清除浮动的方法有哪些？
在前端开发过程中,非IE浏览器下,当容器的高度自动,并且容器内容中有浮动元素(float为left或right),此时如果容器的高度不能自适应内容的高度,从而使得内容溢出破坏整体布局,这种现象叫做浮动 ...
- Web前端开发CSS规范总结
作为Web前端开发必备语言,CSS为大家广为熟知,今天就跟大家分享下CSS规范总结,Web前端的小伙伴们看过来吧! CSS样式的权值(权重) 权值等级的定义 第一等:代表内联样式,如: style=” ...
- 前端开发 CSS中你所不知道的伪类与伪元素的区别--摘抄
做过前端开发的人都熟悉伪类与伪元素,而真正能够彻底了解这二者的区别的人并不多.伪类与伪元素确实很容易混淆. 伪元素主要是用来创建一些不存在原有dom结构树种的元素,例如:用::before和::aft ...
- web前端开发——css
一.css介绍 1.css是什么? Cascading Style Sheets缩写,层叠样式表.样式定义如何显示HTML元素,样式通常又会存在于样式表中. 2.为什么需要css? 使HTML页面变得 ...
随机推荐
- sublime常用插件总结 (立贴)
bracket highlighter 使用这个插件 显示成对标签的位置 {} () [] html标签等的位置
- SBC37x交叉编译平台QT+OPENCV
一.构建交叉编译器 [随机手册]Angstrom是一个界面友好的嵌入式发行版本,用亍手持设备,机顶盒和网络存储设备等嵌入式设备. 光盘的文件系统是定制的The Angstrom Distributio ...
- 【习题 4-9 UVA - 815】Flooded!
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 题目很迷啊. 不会出现盆地? 可以理解为一条线. 从左往右高度上升的一座座山. 然后V升的水从最左边的山倒进去. 然后问你最后海拔多 ...
- Nexus私服的搭建
1.nexus 介绍 是开源的,用该框架架设maven私有服务器 2.nexus私服环境搭建 把nexus.war包放到tomcat的webapps下面 浏览且登录 ...
- （26）改变自动扫描的包【从零开始学Spring Boot】
在开发中我们知道Spring Boot默认会扫描启动类同包以及子包下的注解,那么如何进行改变这种扫描包的方式呢,原理很简单就是: @ComponentScan注解进行指定要扫描的包以及要扫描的类. 接 ...
- （12）Spring Boot改变JDK编译版本【从零开始学Spring Boot】
Spring Boot在编译的时候,是有默认JDK版本的,如果我们期望使用我们要的JDK版本的话,那么要怎么配置呢? 这个只需要修改pom.xml文件的<build> -- <plu ...
- AutoSharedLibrary -- 基于模板元编程技术的跨平台C++动态链接载入库
基于模板元编程技术的跨平台C++动态链接载入库.通过模板技术,使用者仅需通过简单的宏,就可以使编译器在编译期自己主动生成载入动态链接库导出符号的代码,无不论什么额外的执行时开销. extern &qu ...
- RubyMine生成reader/writer方法
RubyMine生成reader/writer方法 在非类的ruby文件中,Alt+Insert会出现新建文件的选项: 在ruby文件的类中,Alt+Insert会出现get/set方法生成提示和重构 ...
- nyoj--635--Oh, my goddess（dfs）
Oh, my goddess 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 Shining Knight is the embodiment of justice an ...
- grpc vs2015编译
获取gRPC源码 gRPC是开源框架,项目代码在github上,所以首先要安装github.github安装后,在指定文件夹中,执行git命令就可以获取gRPC的所有源码. git clone ht ...