CSS样式的使用（CSS选择器、CSS语法、CSS常见样式）：

1.CSS样式的理解：
Cascading Style Sheets（层叠样式表）：修饰html标签样式的

2.使用（需要内嵌html中）：
1.行内样式：（通过标签的style属性使用）
格式：样式名：样式的值
样式名：是由css定义的
2.内联样式：通过style标签使用写在head中
格式：选择器{样式名：样式值；}
3.外联样式（推荐使用）
通过.css文件使用，使用link标签引入写在head中
link标签：
属性：1.rel：引入文件的类型
2.href：引入使用的外部css文件路径

3.CSS语法
1.键值对如：color：red；
2.键与值之间使用冒号
3.每一个属性结束使用分号
4.属性名都是定义好的不可以随意写
5.所有的样式属性写在“ ”或者大括号中
6.注释/**/

4.选择器（定位到具体的某一个标签）
1.标签选择器：使用标签名{}
例如：p{background-color:gray}
2.ID选择器：id值唯一
使用：使用#id值{}
例如：#p2{color:green;}
3.类选择器
特点：多个标签可以有相同的class值一个标签可以有多个class值
例如：.p3{color:pink}
4.属性选择器
特点：属性选择器使用标签名【属性名=属性值】{}
例如： input[name=username]{background-color:pink;}
5.组合选择器
格式：使用组合选择器，class选择器，。。。{}
例如：#d1，.sp,font{color:gold}
6.层级选择器：
特点：外层到内层
格式：使用选择器选择器。。。{}
例如：#ul li {color：greenyellow;}
7.选择器
特点：选中页面中所有的标签
格式：使用{}
例如：*{margin-left:0px;}
8.伪类选择器
使用：标签名：属性{}
例如：
a未点击状态
a;link{color:red}
a 点击后的状态
a;visited{color:gray;}
a 鼠标放上去状态
a:hover{color:blue;}
a 鼠标点击不松手
a:active{color:black;}

5.常见样式：
1.尺寸修饰：
width:宽
height：高
单位：px像素
em：父标签文本的倍数
2.字体修饰
font-size:字体大小
font-style：字体风格（italic：斜体 normal：正常）
font-weight：bolder：字体的类型
font-family:(字体的类型)仿宋
font-variant:（以大型大写字体或者正常文本显示）
3.文本修饰
首行缩进：text-indent:2em
颜色：color：
1.英文字母
2.十六进制
3.rgb（）
4.rgba（）
文本对齐方式：text-align
文本装饰：text-decoration
line-height：行高：可以指定垂直方向上的居中
4.背景样式
1.背景颜色：background-color
2.背景图片：background-image
3.图片是否平铺background-repeat:no-re[eat
4.背景定位：background-positon:rigth bottom
5.图片是否虽则和内容滚动 fixed 不滚动scrool 滚动 background-attackment：fixed
6.简写：background：颜色图片是否平铺是否随内容滚动定位；
5.边框修饰
border-left-color:左边框的颜色
border-left-style:左边框的样式
border-left-width:左边框的宽度
简写：border-top:宽度样式颜色
6.盒子模型
1.width：盒子宽度
2.border：边框宽度
3.margin：外边距（外边框和标签的距离）
4.padding：内边距（内容和内边框的距离）
5.盒子总宽度：width的值+2边框border+2外边距margin+2*内边距padding
6.指定盒子的阴影
1.水平方向的偏移量
2.垂直方向的偏移量
3.阴影的宽度
4.颜色
7.定位
1.相对定位：相对原来的位置
relative
2.绝对定位：相对盒子的边框
absolute
3.fixed 固定定位
fixed
8.浮动
1.作用：
布局演示，排序和对齐
格式：
float：left/right/none;
注意：
浮动脱离文档流会影响后边局部
如果设置了浮动，要清除浮动
9.display：（转换样式）
1.可以将块标签转换成行内块不独占一行，可以设置宽高。（display：inline-block）
2.可以加行标签，转换成行内块标签（display:inline-block）
3.可以实现标签的隐藏和显示display:none
10.列表
1.list-style-type:设置列表的样式
2.list-style-image:url();设置列表标识的图片

CSS样式的使用（CSS选择器、CSS语法、CSS常见样式）：相关推荐

房子装修工程师CSS(一)之盒子模型/选择器的权重计算/常见样式属性/浮动float
一.盒子模型 (一)CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:margin.border.padding.content(width.height). (二)盒子模型分两种: 1. ...
web前端学习day_02:CSS:三种使用方式/选择器/颜色/背景图片/查看样式/文本/元素显示方式/盒子模型/定位方式/行内对齐/显示层级/防溢出
CSS : Cascading Style Sheet 层叠样式表. 作用: 美化页面 CSS 如何在html页面中添加css样式代码?总共有三种方式: 1.选择器 2.选择器练习: 3.颜色赋值 4 ...
Qt样式表之二：QSS语法及常用样式
一.简述 Qt样式表(以下统称QSS)的术语和语法规则几乎和CSS相同.如果你熟悉CSS,可以快速浏览以下内容.不熟悉的话可以先去W3School - CSS或者本人的CSS博客随笔简单了解一下. 在 ...
html的css样式中表示后代选择器,html添加css——样式选择器
如何给html添加样式.两种方法:css 1.新创建一个css样式表,与原html同目录,而后经过link标签连接.如:(link标签是一个void元素,无结束标签.)html 2.直接在html源码 ...
导航栏样式HTML,[JavaScript 实例] 导航栏几种常见样式
这里记录下导航栏几种常见的样式,仅供大家参考. 导航栏1 (原生 JS 代码) 比较常见也比较简单的导航栏 ,用的 JavaScript 原生代码,大致思路是通过改变 li 元素的 className ...
css实例 css中id/class 详解样式表（外部样式表内部样式表内联样式 7种基础选择器多重样式优先级错误理解）[第一天]
文章目录 css实例 css中的id css中的class 样式表外部样式表内部样式表内联样式 7种基础选择器多重样式优先级错误理解 css实例 CSS 规则由两个主要的部分构成:选择器,以 ...
css 选父元素,CSS中模拟父元素选择器
很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...
好程序员HTML5前端教程-css的引入方式和选择器
好程序员HTML5前端教程-css的引入方式和选择器 01.引入css方式(重点掌握) 行内样式内接样式外接样式 3.1 链接式 3.1 导入式 css介绍现在的互联网前端分三层: HTML:超 ...
CSS基础（emmet 语法,CSS 复合选择器, 布局认知,背景样式）
CSS基础 1. emmet 语法 -- 开发效率 1.1 emmet 语法生成 html 标签 emmet 的特点和作用是什么? 通过简写提高编码效率. emmet 生成 HTML 结构语法序号 ...

CSS样式的使用（CSS选择器、CSS语法、CSS常见样式）：

CSS样式的使用（CSS选择器、CSS语法、CSS常见样式）：相关推荐

最新文章

热门文章