建设工程网站168,徐州云龙区建设局网站,长沙做网站建设的,带空间二字的韩国视频网站目录
CSS是什么#xff1f;
基本语法规范
引入方式 内部样式表
行内样式表
外部样式表
常用选择器的种类
基础选择器
标签选择器
类选择器
id选择器
通配符选择器
复合选择器
后代选择器
伪类选择器
常用元素属性#xff1a;
字体属性#xff1a;
文本属性…目录
CSS是什么
基本语法规范
引入方式 内部样式表
行内样式表
外部样式表
常用选择器的种类
基础选择器
标签选择器
类选择器
id选择器
通配符选择器
复合选择器
后代选择器
伪类选择器
常用元素属性
字体属性
文本属性 CSS是什么 层叠样式表(Cascading Style Sheets)。 CSS能够对网页中元素位置的排版进行像素级精确控制实现美化页面的效果能够做到页面的样式与结构的分离。也就是控制页面的展示效果而html决定页面的结构。
基本语法规范 选择器{一条/N条声明} 选择器决定针对谁修改找谁 声明决定修改啥干啥声明的属性是键值对. 使用 区分键值对 使用 : ‘区分键和值
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep {color:blue;font-size: 40px;}/style
/head
bodypp标签/ph1h标签/h1
/body
/html 引入方式 内部样式表 写在style标签中嵌入到html内部理论上style放到html的哪里都行但是一般放到head标签中如上述示例。 优点能够让样式和页面结构分离。 缺点分离的不够彻底尤其是css内容多的时候。
行内样式表
h1 stylecolor:green;font-size: 60px;h标签/h1 当内部样式表和行内样式表冲突时行内样式表优先级比内部样式表高以行内样式表为准。
外部样式表
实际开发中最常用的方式。
创建一个css文件。使用link标签引入css。
示例 创建一个demo01.css文件
p {color:blue;font-size: 80px;
} 在html文件中引入css
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 引入 --!-- rel属性表示引入的是一个样式表href表示引入路径 --link relstylesheet href./demo01.css
/head
bodypdemon01.css引入/p
/body
/html
PS:解决了内部样式表的弊端
常用选择器的种类 1.基础选择器由单个选择器构成的 标签选择器类选择器 id选择器通配符选择器 2.复合选择器:把多种基础选择器综合运用起来 后代选择器子选择器并集选择器伪类选择器 基础选择器
标签选择器 即选择器为标签例如下方代码就是 p 标签
p {color:blue;font-size: 80px;
}
类选择器
特点
差异化表示不同的标签可以让多个标签 都使用同一个标签
语法细节 类名用 . 开头 style .blue { color:blue; } /style div classblue猫/div div 猫/div id选择器
和类选择器相似
css中使用#开头表示id选择器id选择器的值和html中某个元素的id值相同html的元素id不必带#id是唯一的不能被多个标签使用和类选择器最大的区别 style #cat { color:green; font-size: 90px; } /style div idcat猫/div div 猫/div 通配符选择器
使用 * 定义选取所有标签 *{ color:green; font-size: 90px; } 页面的所有内容都会被更改不需要被页面结构调用开发中主要用于针对页面中所有的元素默认样式进行消除消除边距
复合选择器 将前面的基本选择器进行组合
后代选择器 又称为包含选择器选择某个父元素中的某个子元素。 元素1 元素2 {样式声明} 元素1和元素2要使用空格分割 元素1是父级元素2是子级只选元素2不影响元素1
示例 style .hobby li{ color:blue; font-size:40px; } /style ul classhobby li吃饭/li li睡觉/li li玩游戏/li /ul ul li吃饭/li li睡觉/li li玩游戏/li /ul 伪类选择器 定义元素状态
示例 style a{ color:black; } /* 鼠标悬停 */ a:hover { color:red; } /* 鼠标点击 */ a:active { color:green; } /style div a href#不跳转/a /div 常用元素属性
字体属性
设置字体 //字体类型 font-family:宋体 //字体大小 font-size:40px; //字体颜色 color:red; color:#ff0000; // #两位红色像素点ff 两位绿色像素点00 两位蓝色像素点00 color:rgb(255,0,0); //字体样式 font-style:oblique / italic; // italic设置斜体 normal取消斜体 oblique设置倾斜 //字体粗细 font-weight:normal; //可取值 normal默认值 bold粗体字符 bolder更粗的字符 lighter更细的字符 也可以直接写数字400等同于normal700等同于bold inherit 从父元素继承字体的粗细 文本属性 //对齐方式 /*lorm生成一长串句子*/ text-align: 值 /* center / left / right //控制段落首行缩进 text-indent: 值 //单位 px 或者 em em表示当前一个文字的大小 //文本装饰 text-decoration: 值 //underline下划线 none什么都没有给a标签去掉下划线 ovrline上划线 line-through删除线 //行高 line-height: 值
