day 37 CSS
参考博客：https://www.cnblogs.com/majj/p/9021419.html
1.CSS的三种链接样式:
行内链接(优先级最高)
内接样式
外接样式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 权重： 优先级高 权重大 谁在页面谁的权重大 -->
<!-- 外接样式 -->
<link rel="stylesheet" href="./index.css">
<style type="text/css">
/*内接样式*/ /*选择器*/
span{
color: green;
font-size: 30px;
}
</style>
<script type="text/javascript" src="./javascript/index.js"></script> </head>
<body>
<!-- 行内样式 的优先级是最高最高的 -->
<p style="color: red; font-size: 30px;">wusir</p>
<span style="color: purple;">alex</span> </body>
</html>
三种链接样式
2.CSS的选择器
选中的是"共性"
（1）CSS 层叠样式表
作用：修饰网页结构
<!-- 行内样式 的优先级是最高最高的 -->
<p style="color: red; font-size: 30px;">wusir</p>
<span style="color: purple;">alex</span> （2）css的三种引入方式
- 行内样式
注意：行内样式的优先级是最高的
- 内接样式
- 外接样式 （3）基本选择器
id选择器
选中的是特性 唯一的，不能重复
标签选择器
选中的是页面中共性的标签
类选择器
选中的也是页面中共性的标签，类名可以有多个
通配符选择器
通常是对页面进行重置样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="./css/reset.css">
<style type="text/css"> 1.标签选择器 选中的是 ‘共性’
p{
color: red;
} ul,ol{
list-style: none;
}
/*重置样式*/，/*组合选择器*/ 2.类（class）选择器 .类名 选中的也是共性 可以有多个
小技巧：
不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式
每个类要尽可能的小，有共同的概念，能够让更多的标签使用
.active{
color: yellow;
} .large{
font-size: 30px;
} 3.id选择器 选中的是‘特性’ id是唯一的
p1{
color: green;
} 4. 通配符选择器 * （在以后工作中不要用这个 一开始布局页面如果写css,一定要重置 {
padding: 0;
margin: 0; } a{
text-decoration: none;
} 清除a标签的下划线 .baidu{
color: blue;
text-decoration: underline; 下划线
cursor: pointer; 显示小手
} input{
border: none; #（边框）
width: 400px;
height: 40px;
border: 1px solid #e0e0e0; （高度、样式、颜色）
font-size: 22px; （设置字体大小）
} </style>
</head>
<body>
<p id="p1">alex</p>
<p id="p2">alex2</p>
<p>alex3</p>
<p>alex4</p>
<p>alex5</p>
<ul>
<li class="active large"> #类名可是多个，方便以后选择时，可以类的不同而精确选择自己想要的数据
alex1
</li>
<li>
alex2
</li>
</ul>
<ul>
<li class="active">
wusir
</li>
</ul>
<a href="javascript:void(0);">百度一下</a>
<span class="baidu">百度一下</span>
<input type="text"> </body>
</html>
day 37 CSS的更多相关文章
- Grunt的配置及使用（压缩合并js/css）
Grunt的配置及使用(压缩合并js/css) 安装 前提是你已经安装了nodejs和npm. 你能够在 nodejs.org 下载安装包安装.也能够通过包管理器(比方在 Mac 上用 homebre ...
- CSS 学习手册
目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其 ...
- web前端-html学习笔记
学习html最重要的是坚持.细心.多动手.慕课网<HTML+CSS基础课程>的笔记. 1.<h1>网站标题</h1> 如:<h1>腾讯网</h1& ...
- mahout安装和测试
Mahout 是 Apache Software Foundation(ASF) 旗下的一个开源项目,提供一些可扩展的机器学习领域经典算法的实现,旨在帮助开发者更加方便快捷地创建智能应用程序.Apac ...
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- Web前端温故知新-CSS基础
一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...
- 【干货分享】前端面试知识点锦集02（CSS篇）——附答案
二.CSS部分 1.解释一下CSS的盒子模型? 回答一:a.标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度b.网页设计中常听的属性名:内容(content).填充(padding ...
- IE7,6与Fireofx的CSS兼容性处理方法集结
CSS对浏览器的兼容性有时让人很头疼,尤其是对于IE6这个问题多多的浏览器版本,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码 ...
- 很强大的HTML+CSS+JS面试题（附带答案）
一.单项选择(165题) 1.HTML是什么意思? A)高级文本语言 B)超文本标记语言 C)扩展标记语言 D)图形化标记语言 2.浏览器针对于HTML文档起到了什么作用? A)浏览器用于创建HTML ...
随机推荐
- Python安装pyinstaller方法，以及将项目生成可执行程序的步骤
pyinstaller安装方法 前提:确保计算机安装了Python语言环境,并且正确配置了环境变量. 方法一:联网在线自动安装 选择一 Windows OS下进入cmd(命令行窗口) 输入:pip i ...
- Python中使用字典的几个小技巧
1 解包 所谓解包,就是将字典通过 ** 操作符转为 Key=Value 的形式,这种形式可以直接传给函数作为关键字参数. 说说适用的几种情况. 1.1 搜索拼接条件 当应用中使用类似 SQLAlch ...
- python中“end=”用法
python中“end=”用法:例如print(“#”,end=" \n"),默认换行,print(“#”,end=" ")则在循环中不换行
- 转载： ubuntu13.04下载android4.0.1源码过程
转自:http://blog.csdn.net/zhanglongit/article/details/9263009,中间有些不行的地方进行了些小修改. 最初我参考的是老罗的博客http://blo ...
- 2684亿！阿里CTO张建锋：不是任何一朵云都撑得住双11
2019天猫双11 成交额2684亿! "不是任何一朵云都能撑住这个流量.中国有两朵云,一朵是阿里云,一朵叫其他云."11月11日晚,阿里巴巴集团CTO张建锋表示,"阿里 ...
- m113
今天的比赛很有感触,所以来写一下题解: T1可以发现一些规律是:面积扩大的速度显然比周长扩大的速度快,然后就可以枚举周长来看能为成的面积,其实最优的情况一定是六边型的情况,通过手膜我们可以发现对于边长 ...
- NOIP 模拟17
最近状态有些不对劲,总是出现各种各样的小错误...... 这次可以说是很水的一套题(T3神仙题除外),T1就是一个优化的暴力,考场上打了一个n的四次方的程序,在距考试结束还有5分钟的时候猜想出来正解, ...
- 【Elasticsearch 7 探索之路】（二）文档的 CRUD 和批量操作
上一篇,我们介绍了什么是 Elasticsearch,它能做什么用以及基本概念(索引 Index.文档 Document.类型 Type)理解.这篇主要对 文档的基本 CRUD 和 倒排索引进行讲解. ...
- 易初大数据 2019年10月24日 spss笔记 王庆超
数据文件的重置结构:横向结构(个案组),纵向结构,不符合分析方法的时候就需要重组,选定变量重组为个案,数据—重构,重构数据向导,选定变量重组为个案,将选定个案重构位变量,转置所有数据,变量组数目,一个 ...
- 004.Kubernetes二进制部署创建证书
一 创建CA证书和密钥 1.1 安装cfssl工具集 [root@k8smaster01 ~]# mkdir -p /opt/k8s/cert [root@k8smaster01 ~]# curl - ...