前端之CSS(上)
CSS
CSS 简介
## CSS介绍
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
## CSS语法
CSS实例：每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。
例如：
h1 {color: red; font-size: 14px}
选择器 属性 声明 值 属性 声明 值
## CSS注释
/*这是注释*/
快捷键是 ctrl + /
CSS的几种引入方式
## 行内样式
行内式是在标记的style属性中设定CSS样式。不推荐大规模使用
<p style="color; red">Hello world.</p>
## 内部样式
嵌入式是将CSS样式集中写在网页<head></head>标签对中，格式如下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
<p>Hello world</p>
## 外部样式
外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
CSS选择器
## 基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#a1{
color: red;
}
/*id选择器*/
.a2{
color: yellow;
}
/*类选择器*/
#a1 #a11{color: greenyellow}
/*后代选择器*/
#a1>#a11{color: hotpink}
/*儿子选择器*/
#a1+p{margin: 10px}
/*选择所有紧接着 #a1 元素之后的<p>元素*/
#a1~div{border: 2px solid royalblue}
/*a1后面所有的兄弟div标签*/
div[title="hello"]{color: bisque}
/*用于选定带有指定属性和值的元素（选择属性title值为hello）*/
#a1, #a21 {color: blueviolet}
/*同时给id为a1和a21的字体颜色设置为蓝色，用到了分组，
标签之间用逗号隔开*/
body { font-family: "宋体", "Arial", sans-serif }
/*字体属性*/
div {
width: 20%;
height:200px;
background:yellowgreen;
}
/*宽、高和背景颜色*/
/* 未访问的链接 */
a:link {
color: #FF0000
}
/* 鼠标移动到链接上 */
a:hover {
color: #FF00FF
}
/* 选定的链接 */
a:active {
color: #0000FF
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
/*input输入框获取焦点时样式*/
input:focus {
outline: none;
background-color: #eee;
}
p:first-letter{font-size: 49px; color: red}
/*伪元素选择器，给首字母设置特殊格式*/
</style>
</head>
<body>
<div id="a1" style="font-size: 40px">
hello
<div id="a11">
hello world
</div>
<div id="a12">
hello china
</div>
</div>
<p>哈哈哈</p>
<div class="a2" style="font-size: 40px" title="hello">
welcome
<div id="a21">
welcome china
</div>
<div id="a22">
welcome British
</div>
</div>
<!--<link href="mystyle.css" rel="stylesheet" type="text/css"/>-->
<a href="属性的引入方式.html">属性的引入方式</a>
<p>hello<span>world</span>nice to meet you</p>
</body>
</html>
补充点
## 不怎么常用的属性选择器
/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
color: red;
}
/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
color: yellow;
}
/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
color: red;
}
/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {
color: green;
}
## 伪元素选择器
before:
/*在每个<p>元素之前插入内容*/ p:before { content:"*"; color:red; }
after:
/*在每个<p>元素之后插入内容*/ p:after { content:"[?]"; color:blue; }
#### before和after多用于清除浮动
'''
选择器的优先级
内联样式的权重为1000，id选择器的权重为100，类选择器的权重为10，元素选择器的权重为1，权重计算永不进位
'''
## CSS属性相关
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度，内联标签的宽度由内容来决定。
## 字体属性
# 字重（粗细）
normal:标准粗细
bold:粗体
bolder:更粗
lighter:更细
100~900：设置具体粗细，400等同于normal,而700等同于bold
inherit:继承父元素字体的粗细值，默认值
# 文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
前端之CSS(上)的更多相关文章
- 前端开发 - CSS - 上
CSS: 1.css的引入方式 2.基础选择器 3.高级选择器 4.选择器的优先级 5.伪类选择器 6.字体样式 7.文本样式 8.背景 9.盒模型border 10.margin 11.paddin ...
- 前端开发css实战：使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- 前端之css
前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- 第二篇：web之前端之css
前端之css 前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式 ...
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
随机推荐
- 解决win10下IIS下"对路径...的访问被拒绝
解决方案如下: 1.右击文件夹,安全,添加IUSR和IIS_IUSRS安全控制权限. 2.右击文件夹,常规,查看是否只读.将只读属性去掉.
- 基于arm的嵌入式QT开发（课程设计）
一. 项目要求 配置QT5.7基于x86及arm 等两种CPU架构的调试及开发环境: 移植arm编译后的QT5.7及屏幕校准工具tslib1.4至CORTEX ARM9实验平台: 开发基于QT5.7的 ...
- 如何备份开拓者TBQuant的策略文件
备份 "C:\TBQuant_V1.1.0.9_X64\users\你的用户名\Strategy\data\strategy.bin" 这个文件即可.
- Linux内核中的并发与竞态概述
1.前言 众所周知,Linux系统是一个多任务的操作系统,当多个任务同时访问同一片内存区域的时候,这些任务可能会相互覆盖内存中数据,从而造成内存中的数据混乱,问题严重的话,还可能会导致系统崩溃. 2. ...
- 将Prometheus alerts保存到elasticsearch
Prometheus产生的告警通常会发送到alertmanager,当使用alertmanager时,其告警信息仅存在于alertmanager的内存中,无法持久化.故实现了小工具,用于将Promet ...
- ECS -------------- 更换系统
由于是在云服务器上所以更换系统比较简单 1.首先将你运行的实例停止 点击确定 2. 将停止的系统进行更换 确定 点击批量更改 更换需要的系统 点击确定 更换系统输入手机验证码. 更换好了 3.修改远程 ...
- Application类-欢迎页(初始界面)
在程序界面显示前,如果我们处理了很多耗时操作,这个时候给用户提示一个欢迎页便是十分友好的.WPF为我们提供了这个特性: 第一种方法:通过设置图片资源的生成操作 粘贴一个图片到我们的项目中 在解决方案管 ...
- asp.net core不通过构造方法从容器中获取对象及解决通过这种方法NLog获取对象失败的问题
一般想从容器中获取对象,我们都是通过构造方法获取对象,但有些条件不允许不能通过构造方法获取对象,我们必须单独从容器中单独创建获取找个对象,这样我们就不行把找个容器静态保存起来供全局diaoy 一. 简 ...
- C# 通过反射获取winform上的控件
比如获取Button按钮: System.Reflection.FieldInfo[] fieldInfo = form.GetType().GetFields(System.Reflection.B ...
- .net core使用jwt自动续期
小弟不C才,最近看了下网上的jwt方案,于是自己写了一个简单的jwt方案和大家分享下,希望大家给点意见! 假如有一个读书网站,可以不用登陆就访问,当需要自己写文章的时候就必须登录,并且登录之后如果一段 ...