前端学习之day02-CSS基础

上午笔记

Day02 css属性组成和作用：预习1、css属性和属性值的定义
2、css文本属性  font-size9pt = 12px; 1em=16px 0.75em=12px=9ptfont-weightbolder(更粗的)bold(加粗)normal(常规)/100-900 9个等级font-styleitalic/oblique/normal italic倾斜字体/oblique字体没有倾斜属性的倾斜文字text-alignvertical-aligntop/bottom/middle/baselineline-height normal/valuetext-decoration:none/underline/overline/line-thoughtext-indent可以取负值、只对第一行起作用text-transformnone/capitalize/uppercase/lowercaseletter-spacingvalue 字母或汉字之间间距word-spacingvalue 单词词距font-variantnormal常规字体/samll-caps小型大写字母字体layout-flowforizontal自左向右/vertical-ideographic自上而下font:bolder italic 12px/1.5em "宋体"
3、css列表属性list-style-type:disc/circle/square/nonelist-style-image:url()list-style-position:outline外边/inside里面 定义列表符号位置list-style去掉列表符号
4、css背景属性background-color:redbackground-image:url()background-repeat:no-repeat/repeat/repeat-x/repeat-ybackground-position:left/center/right/数值 top/center/bottom/数值background-attachement:fixed固定/scroll滚动
5、css边框属性border: 5px solid #ff0000;border-widthborder-colorborder-style:solid实/dashed虚/dotted点/double/noneborder-bottom/left/right/topborder-left-color
6、css浮动属性floatclear清除浮动none/left/right/both====================================================================================================================================================================
css基础css基本语法:选择器{属性: 属性值;属性: 属性值;属性: 属性值;}选择器:查找页面元素的一种方式方法{} 样式规则,规定了使用选择器查找的元素实现何种样式男生{发型: 3mm;}注意事项: 1\属性和属性值使用:链接2\每一组属性和属性值结束后需要带封号;3\如果你的属性和属性值是最后一组出线的,可以不用带封号属性:对元素的描述属性值:描述的取值css样式表分类:1\行内样式表:含义: 将所有的css语法放置在标签里基本语法: <div style="属性:属性值;属性:属性值;"></div>弊端:结构(HTML)和样式(CSS)没有分开使用行内样式表只会对独立的一个标签进行修饰,代码重复率比较高,结构比较乱2\内部样式表含义: 将对应的css语法和结构分开,所有的css语法需要放在一个style标签里面,推荐放在头部里面基本语法: <head><style>选择器{属性:属性值;}</style></head>弊端: 结构和样式还没有做到完全分离,你的css还在html中如果代码较多的话,上下滚屏比较麻烦容易产生头重脚的效果3\外部样式表含义: 所有的央视修饰都放在独立的以.css为后缀名的文件中需要使用link标签进行引入优点: 结构样式完全分离所有的样式表都对样式进行修饰的话,实现的是什么样式?======>样式表的优先级!important>行内>内部>外部(前提是内部再外部的下面)

下午笔记

选择器：标签选择器：通过标签的名字去查找页面中的元素1、标签名字当作选择器基本语法p{样式规则}匹配范围太广泛2、类选择器通过给元素起class类名，然后css里面通过类名查找页面中的元素基本语法 HTML:<div class="box"></div>CSS : .box{样式规则}只要角对应的类名都能查找到并且进行修饰，不区分元素类型弊端    匹配范围有缩小，但是还比较广3、id选择器基本语法HTML：<div id="bobo"></div>CSS : #bobo{样式规则}注意，每一个元素都能带id号，但是id的取值不能一致ID具有唯一性优点：精确度比较高，问题：如果使用不同的选择器修饰同一个元素，实现那个效果。======>>>>权重，优先级跟代码书顺序无关和权重有关，id>类>标签——————————————————————————————————————— |            |             |            ||  选择器    |   符号      |    权重值  ||  通配符    |     *       |     0000   ||    id      |     #       |     0001   ||    类      |     .       |     0100   || 行内样式   |             |     1000   || !important |             |     10000  |———————————————————————————————————————4、通配符选择器 能够查找到页面中所有的元素，只实现一个一个效果取消所有元素自带的内边距和外边距*{margin:0;padding:0;}问题 如何给元素起俩个类名，并且俩个类名都对元素进行修饰，实现的是哪一个效果语法<div class="box1 box2"></div>如果俩个类对同一个元素进行修饰的话，实现的效果是后者，与代码顺序有关系。写在后面的会执行8、群组选择器作用：能够将公共的样式提取出来一起设置，做到节约代码作用。9、关系选择器、层级选择器后代子代选择器后代选择器 使用符号 空格子代选择器 使用符号 >关系选择器匹配当前元素的后一个兄弟 +匹配当前元素的后面所有兄弟 ~注意：只向后匹配10、伪类选择器: 原本元素没有对应的样式修改，我需要通过伪类选择器进行修改对应的样式四个伪类选择器一般经常在a标签里面===:link       ===================>>访问前:visited    ===================>>访问后的样式:hover      ===================>>鼠标悬停，悬浮，划过:active     ===================>>鼠标点击时，点击瞬间，鼠标落点单纯的四个伪类，里面的hover可以单独拎出来使用11、属性选择器： 通过元素的属性（HTML，标签）查找页面的元素基本语法：[属性]                ======>查找页面中所有带有该属性的元素[属性="属性值"]       =======>匹配也年终所有带该属性并且有属性值的元素E[属性]               =======>匹配页面中某一类元素中带有该属性元素E[属性="属性值"]      =======>匹配页面中某一类元素中带有该属性，并且属性值的元素属性选择器经常使用在表单元素中12： ：checked选中状态伪类修改单复选的默认样式css基本语法选择器{属性：属性值属性：属性值}
选择器：页面元素的查找方法{}：样式规则：规定了选择器查找到的元素实现何种样式css里面核心的属性和属性值1、文本属性2、边框属性3、列表属性4、背景属性5、浮动属性6、盒子模型属性7、元素类型属性8、溢出属性9、定位属性核心属性：css文本属性  font-size9pt = 12px; 1em=16px 0.75em=12px=9ptfont-family浏览器默认为宋体，但是在谷歌浏览器里面默认字体是微软雅黑font-weightbolder(更粗的)bold(加粗)normal(常规)lighter（细体）/100-900 9个等级 100 细体 400 正常（取消加粗和标题标签的效果） 700加粗 900更粗font-styleitalic/oblique/normal italic倾斜字体/oblique字体没有倾斜属性的倾斜文字text-alignvertical-aligntop/bottom/middle/baselineline-height normal/valuetext-decoration:none/underline/overline/line-thoughtext-indent可以取负值、只对第一行起作用text-transformnone/capitalize/uppercase/lowercaseletter-spacingvalue 字母或汉字之间间距word-spacingvalue 单词词距font-variantnormal常规字体/samll-caps小型大写字母字体layout-flowforizontal自左向右/vertical-ideographic自上而下font:bolder italic 12px/1.5em "宋体"

前端学习之day02-CSS基础相关推荐

前端学习之路CSS基础学习二
CSS属性相关样式操作: (1)width:为元素设置宽度 (2)height:为元素设置高度 ps:块儿级标签才能设置长宽行内标签设置长宽没有任何影响 p{width: 30px;height: ...
做好前端的话HTML和CSS基础必须夯实!
很多前端大佬说,要做好前端的话html和css基础必须夯实.那么,达到什么水平才能叫基础夯实呢? 1.拿到设计人员给的图,不管是pc或者是移动端的图,看一遍之后脑海中已经有了很明确的结构和页面书写过程 ...
前端学习笔记之CSS3基础语法与盒模型（二）
前端学习笔记之 CSS3基础语法与盒模型 CSS3简介 CSS(cascading style sheet,层叠式样式表)是用来给HTML标签添加样式的语言 CSS3是CSS的最新版本,增加了大量的样 ...
前端学习第一周-计算机基础，html标签的介绍，其中包括列表，表格以及表单的使用
前端学习第一周-HTML基础文章目录前端学习第一周-HTML基础前言 DAY 1 计算机组成计算机网络 DAY 2 vscode快捷方式 HTML骨架 DAY 3 HTML属性 HTML标签 ...
css清除浮动的几种方法_web前端学习路线分享CSS浮动-清除浮动篇
web前端学习路线分享CSS浮动-清除浮动篇,为什么要清除浮动这里所说的清除浮动,并不是不要浮动了,而是清除浮动与浮动之间的影响.那么到底会有什么影响呢? 1．高度塌陷举个例子我们看一下. 我们在 ...
前端学习笔记（js基础知识）
前端学习笔记(js基础知识) JavaScript 输出 JavaScript 数据类型常见的HTML事件 DOM 冒泡与捕获流程控制语句 for..in 计时器 let,var,const的区别 ...
寒假中前端学习归档html/css
寒假中前端学习归档html/css 001blog: <!DOCTYPE html> <html><head><meta charset="utf- ...
〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...
零基础小白前端学习之初始CSS
现在的互联网前端分为三层: HTML:超文本标记语言.从语义的角度描述页面结构 CSS:层叠样式表.从审美的角度负责页面样式 JS:Javascript.从交互的角度描述页面的行为 css它是一个很神 ...
从零开始学习前端开发 — 2、CSS基础
一.CSS简介 1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成 ...

前端学习之day02-CSS基础

上午笔记

下午笔记

前端学习之day02-CSS基础相关推荐

最新文章

热门文章