css day1
基础知识
css:层叠样式表
以html为基础，提供丰富的功能，如字体、颜色、背景的控制及整体排版
css中只有（冒号）： 没有（等于号）=
css样式规则
1.选择器用于指定css样式作用的html对象，花括号内是对该对象设置的具体样式
2.属性和属性值以“键值对”的形式出现
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
4.属性和属性值之间用英文“:”连接
5.多个“键值对”之间用英文“;”进行区分
在<head></head>中添加<style></style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
h1 {
color:orange;
font-size:20px;
}
</style>
</head>
<body>
<h1>css基础实验</h1>
</body>
</html>
字体样式属性
color
颜色
font-size
字号大小,可以使用相对长度（较常用，推荐使用）或绝对长度
相对长度
em：相对于当前对象内文本的字体尺寸
px：像素，最常用，推荐使用
绝对长度
in：英寸
cm：厘米
mm：毫米
pt：点
font-family
字体，网页中常用的有宋体、微软雅黑、黑体等
1.网页中普遍使用14px+，默认是16px
2.尽量使用偶数的数字字号，ie6等老式浏览器奇数会后bug
3.各种字体之间必须使用英文的,隔开
4.中文字体需要加英文状态下的引导时，英文字体一般不需要加引号，英文字体名必须位于中文字体名之前
5.如果字体中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如：font-family："Times new Roman";
6.尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示
CSS Unicode
字体：可以又进制码表示
字体名称 英文名称 Unicode编码
宋体 SimSun \5B8B\4F53
新宋体 NSimSun \65B0\5B8B\4F53
黑体 SimHel \9ED1\4F53
微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1
楷体_GB2312 KaiTi_GB2312 \96B6\4E66
隶书 LiSu \96B6\4E66
幼圆 YouYuan \5E7C\5706
华文细黑 STXihei \534E\6587\7EC6\9ED1
细明体 MingLiU \7EC6\660E\4F53
新细明体 PMingLiU \65B0\7EC6\660E\4F53
例子：font-family: "\5E7C\5706"
font-weight
字体粗细
属性：normal、bold、bloder、lighter、100~900（100的整数倍）
400等价于blod，700等价于blod
font-style
字体风格,例子：斜体、倾斜、正常
属性：normal（默认标准样式）、italic（斜体）、oblique（倾斜）
font
综合设置字体样式
选择器 {font: font-style font-weight font-size/line-height font-family}
1.使用font时，必须按照上面的语法格式的顺序书写，不能更换顺序，各个属性之间用空格隔开
2.其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用
font: italic blod 16px "微软雅黑"
css注释
/* */
快捷键：Ctrl+/
选择器
类选择器
单类名选择器
使用“.”（英文点号）进行标识，后面跟类名
优点：为元素对象定义单独或相同的样式
基本语法格式
.类名{属性1：属性值1；属性2：属性值2；属性3：属性值3；···}
标签调用时用<class="类名">即可
不要用数字和汉字定义类名，最好见名知意
<html>
<head>
<style>
.laowang1 { /*声明类样式*/
color:orange;
}
.laowang2 {
font-size="微软雅黑"
}
#laowang3 { /*ID选择器*/
front-style：normal
}
</style>
</head>
<body>
<div class="laowang1">老王1</div> /*引用类样式*/
<div class="laowang1 laowang2">老王2</div>
<div id="laowang3">老王3</div>
</body>
</html>
多类名选择器
类名排序没有先后顺序
各个类名之间用空格隔开
<div class="laowang1 laowang2">老王2</div>
ID选择器
用#表示
#laowang3 { /*ID选择器*/
front-style：normal
}
<div id="laowang3">老王3</div>
类选择器和ID选择器的区别
W3C规定，在同一个页面内，不允许有相同名字的id对象出现，但允许相同名字的class
类选择器好比人的名字，可以多次重复使用
ID选择器好比人的身份证号码，是唯一的，不可重复
通配符选择器
用*表示，是所有选择器中作用范围最广的，能匹配页面中的所有元素
* {属性1：属性值1；属性2：属性值2；属性3：属性值3；···}
清除所有html默认边距
* {
margin：0 /*定义外边距*/
padding:0 /*定义内边距*/
}
伪类选择器
用：表示
用于向某些选择器添加特殊效果
链接伪类选择器
link（常用）：未访问的链接
visited：已访问的链接，已经点击过一次
hover（常用）：鼠标移动到链接时发生的变化
active：选定的链接，按住鼠标不放开的状态
注意：尽量不要颠倒顺序，lvha
a:link {
font-size:16px;
color:blue;
}
简写方式
a { /*a表示标签选择器*/
font-size:16px;
color:blue;
}
结构伪类选择器
first-child：选取属于其父元素的首个子元素的指定选择器
last-child：选组属于其父元素父最后一个子元素的指定选择器
nth-child（n可以从0开始）：选取属于其父元素的第N个子元素，不论元素的类型，even/2n表示偶数，odd/2n+1表示奇数
nth-last-child：选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计算，n可以是数字、关键词或公式
<style>
li:first-child{
color:red
}
</style>
<style>
li:nth-child(odd){ /*选择奇数*/
color:red
}
</style>
目标伪类选择器
:target
选取当前活动的目标元素
基础知识 css:层叠样式表 以html为基础，提供丰富的功能，如字体、颜色、背景的控制及整体排版 css中只有： 没有=
css样式规则 1.选择器用于指定css样式作用的html对象，花括号内是对该对象设置的具体样式 2.属性和属性值以“键值对”的形式出现 3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等 4.属性和属性值之间用英文“:”连接 5.多个“键值对”之间用英文“;”进行区分
在<head></head>中添加<style></style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> h1 { color:orange; font-size:20px; } </style> </head> <body> <h1>css基础实验</h1> </body> </html>
字体样式属性 color 颜色 font-size 字号大小,可以使用相对长度（较常用，推荐使用）或绝对长度 相对长度 em：相对于当前对象内文本的字体尺寸 px：像素，最常用，推荐使用 绝对长度 in：英寸 cm：厘米 mm：毫米 pt：点 font-family 字体，网页中常用的有宋体、微软雅黑、黑体等 1.网页中普遍使用14px+，默认是16px 2.尽量使用偶数的数字字号，ie6等老式浏览器奇数会后bug 3.各种字体之间必须使用英文的,隔开 4.中文字体需要加英文状态下的引导时，英文字体一般不需要加引号，英文字体名必须位于中文字体名之前 5.如果字体中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如：font-family："Times new Roman"; 6.尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示 CSS Unicode 字体：可以又进制码表示 字体名称 英文名称 Unicode编码 宋体 SimSun \5B8B\4F53 新宋体 NSimSun \65B0\5B8B\4F53 黑体 SimHel \9ED1\4F53 微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1 楷体_GB2312 KaiTi_GB2312 \96B6\4E66 隶书 LiSu \96B6\4E66 幼圆 YouYuan \5E7C\5706 华文细黑 STXihei \534E\6587\7EC6\9ED1 细明体 MingLiU \7EC6\660E\4F53 新细明体 PMingLiU \65B0\7EC6\660E\4F53 例子：font-family: "\5E7C\5706" font-weight 字体粗细 属性：normal、bold、bloder、lighter、100~900（100的整数倍） 400等价于blod，700等价于blod font-style 字体风格,例子：斜体、倾斜、正常 属性：normal（默认标准样式）、italic（斜体）、oblique（倾斜） font 综合设置字体样式 选择器 {font: font-style font-weight font-size/line-height font-family} 1.使用font时，必须按照上面的语法格式的顺序书写，不能更换顺序，各个属性之间用空格隔开 2.其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用 font: italic blod 16px "微软雅黑"css注释 /* */ 快捷键：Ctrl+/选择器 类选择器 单类名选择器 使用“.”（英文点号）进行标识，后面跟类名 优点：为元素对象定义单独或相同的样式 基本语法格式 .类名{属性1：属性值1；属性2：属性值2；属性3：属性值3；···} 标签调用时用<class="类名">即可 不要用数字和汉字定义类名，最好见名知意 <html> <head> <style> .laowang1 { /*声明类样式*/ color:orange; } .laowang2 { font-size="微软雅黑" } #laowang3 { /*ID选择器*/ front-style：normal } </style> </head> <body> <div class="laowang1">老王1</div> /*引用类样式*/ <div class="laowang1 laowang2">老王2</div> <div id="laowang3">老王3</div> </body> </html> 多类名选择器 类名排序没有先后顺序 各个类名之间用空格隔开 <div class="laowang1 laowang2">老王2</div> ID选择器 用#表示 #laowang3 { /*ID选择器*/ front-style：normal } <div id="laowang3">老王3</div> 类选择器和ID选择器的区别 W3C规定，在同一个页面内，不允许有相同名字的id对象出现，但允许相同名字的class 类选择器好比人的名字，可以多次重复使用 ID选择器好比人的身份证号码，是唯一的，不可重复 通配符选择器 用*表示，是所有选择器中作用范围最广的，能匹配页面中的所有元素 * {属性1：属性值1；属性2：属性值2；属性3：属性值3；···} 清除所有html默认边距 * { margin：0 /*定义外边距*/ padding:0 /*定义内边距*/ }伪类选择器 用：表示 用于向某些选择器添加特殊效果 链接伪类选择器 link（常用）：未访问的链接 visited：已访问的链接，已经点击过一次 hover（常用）：鼠标移动到链接时发生的变化 active：选定的链接，按住鼠标不放开的状态 注意：尽量不要颠倒顺序，lvha a:link { font-size:16px; color:blue; } 简写方式 a { /*a表示标签选择器*/ font-size:16px; color:blue; } 结构伪类选择器 first-child：选取属于其父元素的首个子元素的指定选择器 last-child：选组属于其父元素父最后一个子元素的指定选择器 nth-child（n可以从0开始）：选取属于其父元素的第N个子元素，不论元素的类型，even/2n表示偶数，odd/2n+1表示奇数 nth-last-child：选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计算，n可以是数字、关键词或公式 <style> li:first-child{ color:red } </style> <style> li:nth-child(odd){ /*选择奇数*/ color:red } </style> 目标伪类选择器 :target 选取当前活动的目标元素外观属性
css day1的更多相关文章
- 03 CSS听课笔记
CSS:页面美化和布局控制 1. 概念: Cascading Style Sheets 层叠样式表层叠:多个样式可以作用在同一个html的元素上,同时生效 2. 好处:(1)功能强大(2)将内容展示和 ...
- 前端入门——day1（简介及推荐书籍和网站）
写给谁 这篇文章写给想要入门前端或者刚入门前端的小白~如果是已经工作好几年的小伙伴们可以直接跳过这一系列文章啦. 为啥写这篇文章 终于决定给自己挖这个坑了,之前一直没打算写这样的系列文章.回想起自己的 ...
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- Day1:html和css
Day1:html和css 了解浏览器 掌握WEB标准 理解标签语义 掌握常用标签 掌握三种列表标签 前端开发工具: 浏览器是网页显示.运行的平台,IE.火狐(Firefox).谷歌(Chrome). ...
- CSS学习笔记day1
1.css的简介 css:层叠样式表 (层叠:一层一层的:样式表:很多的属性和属性值) 使页面显示效果更好 将页面内容和显示样式进行分离,提高了显示功能. 2.css和html的结合方式(4种) 在 ...
- CSS基础-DAY1
CSS 概述CSS 指层叠样式表 (Cascading Style Sheets),样式定义了如何显示 HTML文件中的标签元素,CSS是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标 ...
- html+css 知识点总结 day1(01-08)
01 初步认识浏览器 02 浏览器内核 IE 内核:Trident, win10 Edge 内核:EdgeHTML Firefox(火狐浏览器) 内核:Ge ...
- CSS学习—day1
摘要:web前端设计三剑客分为是html.CSS.Javascript,前面我们已经对html基础知识做了介绍,它定义了页面基本组成,而CSS则控制网页的样式和布局. 首先,明确一个问题,什么是CSS ...
- 中软培训第一周复习总结 --简单的HTML 与CSS
一些需要记住的点: day1 HTML格式及简单标签: html 文件一般格式: 1 <html> 2 <head lang="en"> 3 <met ...
随机推荐
- python数据分析第二版：数据加载，存储和格式
一:读取数据的函数 1.读取csv文件 import numpy as np import pandas as pd data = pd.read_csv("C:\\Users\\Admin ...
- 雷哥带你了解webSocket原理
偶然在知乎上看到一篇回帖,瞬间觉得之前看的那么多资料都不及这一篇回帖让我对 websocket 的认识深刻有木有.所以转到我博客里,分享一下.比较喜欢看这种博客,读起来很轻松,不枯燥,没有布道师的阵仗 ...
- FFT IP核调用与仿真之FFT数学分析
对于FFT这个IP核,我其实对它真的是又爱又恨,因为它真的耗费了我太多时间,但是随着研究的深入,遇到的问题一点点给消化解决,终于不用带着问题睡觉了,哈哈,有时候真的挺佩服自己的,遇到不懂的,不了解的, ...
- IP释放、更新、以及清除DNS
此篇文章会带您进行DNS释放.更新以及清除步骤,并协助您就解决您网络方面问题.请在下方选择您所使用的操作系统. Windows 8 在桌面按住Windows + X按键. 选择Command Prom ...
- <R语言编程艺术>的一个错误以及矩阵相加
R语言编程艺术讲矩阵这节时,举了个随机噪声模糊罗斯福总统画像的例子.但是里面似乎有个错误,例子本意是区域外的值保持不变,而选定区域的值加一个随机值,但是实际情况是两个行列不相等的矩阵相加,会报错,如果 ...
- [CSP-S模拟测试]:飞(fly)（数状数组+简单几何）
题目描述 $liu\_runda$决定提高一下知识水平,于是他去请教郭神.郭神随手就给了$liu\_runda$一道神题,$liu\_runda$并不会做,于是把这个题扔到联考里给高二的做.郭神有$n ...
- HDU6668 Polynomial（模拟）
HDU6668 Polynomial 顺序遍历找出最高次幂项的系数 分三种情况 \(1/0\).\(0/1\).\(f(x)/g(x)\) . 复杂度为 \(O(n)\) . #include< ...
- leetcode 235. 二叉搜索树的最近公共祖先(c++)
给定一个二叉搜索树, 找到该树中两个指定节点的最近公共祖先. 百度百科中最近公共祖先的定义为:“对于有根树 T 的两个结点 p.q,最近公共祖先表示为一个结点 x,满足 x 是 p.q 的祖先且 x ...
- Integer自动装箱和拆箱
Integer a=3; => Integer a=Integer.valueOf(3); /** *@description: 自动装箱和拆箱 *@auther: yangsj *@ ...
- python web自动化测试框架搭建(功能&接口)——测试用例执行和结果收集
由于unittest框架中结果收集在不同文件中,所以此处重写结果收集方法,加入执行时间,失败信息,失败截图等 TestRunner.py # coding=utf-8 import sys impor ...