1200字范文 > CSS 层叠样式表入门使用

CSS 层叠样式表入门使用

时间：2021-03-02 03:45:25

相关推荐

CSS 层叠样式表入门使用

CSS:页面美化和布局控制

CSS:Cascading Style Sheets 层叠样式表层叠：多个样式可以作用在同一个html的元素上，同时生效好处功能强大将内容展示和样式控制分离降低耦合度让分工协作更容易提高开发效率

CSS与html的结合

内联样式在当前标签内使用style属性指定css代码如<div style="color: aqua;">hello world</div>hello world 内部样式在head标签内，定义style标签，style标签的标签体内容就是CSS代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>结合方式</title><style>div{color: #8d893b;}</style></head><body><div>hello world</div></body></html>

外部样式定义css资源文件在head标签内，定义link标签，引入外部的资源文件

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>外部结合</title><link rel="stylesheet" href="css/trytry.css"></head><body><div>hello world</div></body></html>

// css目录下的trytry.css文件div{color: #bdff4f;}

CSS语法

格式：

选择器{属性名1：属性值1;属性名2：属性值2;属性名3：属性值3;...}

选择器：筛选具有相似特征的元素

每一对属性需要使用分号;隔开,最后一对可以不用基本选择器id选择器:选择器具体的id属性值的元素,建议在一个html页面中id值唯一#id 属性值{}元素选择器:选择具有相同标签名称的元素语法: 标签名称{}优先级低于id选择器类选择器：选择具有相同的class属性值的元素语法:.class属性值{}优先级高于元素选择器

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>基础选择器</title><style>#demo01id选择器{color: aquamarine;}demo02元素选择器{color: brown;}.demo03类选择器{color: #18e823;}</style></head><body><div id="demo01id选择器">hello world</div><demo02元素选择器>hello world</demo02元素选择器><p class="demo03类选择器">hi</p></body></html>

扩展选择器

选择所有元素*{}并集选择器选择器1，选择器2{}子选择器:筛选选择器1下的选择器2元素选择器1 选择器2{}父选择器：筛选选择器2上的选择器1元素选择器1>选择器2{}属性选择器:选择元素名称，属性名=属性值的元素元素名称[属性名="属性值"]尾类选择器:选择一些元素具有的状态元素:状态{}超链接状态 link：初始化的状态hover：鼠标悬浮的状态active：正在访问的状态visited：被访问过的状态

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>扩展选择器</title><style>div p{color: aqua;}a:link{color: #18e823;}a:active{color: brown;}a:hover{color: blueviolet;}</style></head><body><div><p>hello</p></div><p>world</p><br><a href="demo01.html" target="_blank">超链接状态</a></body></html>

属性

字体、文本 font-sizecolortext-align 对齐方式line-height 行的高度背景 background 边框 border:设置边框，符合属性尺寸 widthheight 盒子模型：控制布局 margin:外边距padding:内边距默认情况下，内边距会影响盒子的大小box_sizing:border-box; 设置盒子的属性，让width和height就算最终盒子的大小 float:浮动 left：左浮动right:右浮动

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。