网站流量站怎么做的,北京网站备案代理,国内网站备案流程,近期时事新闻10条目录 一、目的与优势二、CSS导入方式三、语法结构四、选择器类型基本选择器组合选择器伪类与伪元素属性选择器 六、选择器优先级总结 六、CSS属性1. 字体与文本属性2. 背景属性3. 尺寸与盒模型属性4. 布局与定位5. 列表样式6. 边框与轮廓7. 文本装饰与效果8. 动画与过渡9. 伪类… 目录 一、目的与优势二、CSS导入方式三、语法结构四、选择器类型基本选择器组合选择器伪类与伪元素属性选择器 六、选择器优先级总结 六、CSS属性1. 字体与文本属性2. 背景属性3. 尺寸与盒模型属性4. 布局与定位5. 列表样式6. 边框与轮廓7. 文本装饰与效果8. 动画与过渡9. 伪类与伪元素10. 其他 七、盒子模型 CSSCascading Style Sheets层叠样式表是一种样式表语言用于定义HTML或XML文档中元素的外观、布局和结构。以下是CSS的详细介绍 一、目的与优势
分离内容与表现CSS使网页内容HTML与样式分离提高了网页的可维护性、可读性和可扩展性。一致的样式管理通过集中定义样式CSS使得整个网站或应用的外观和布局保持一致。增强设计灵活性CSS提供了丰富的设计选项如颜色、字体、布局、动画等便于实现复杂的视觉效果。响应式设计CSS媒体查询支持根据设备屏幕尺寸、分辨率等条件应用不同的样式实现网页的响应式布局。 如何使用CSS呢首先要导入CSS,下面就介绍了几种常用方式 二、CSS导入方式
CSS 导入方式主要有以下几种 内联样式直接将CSS代码写在HTML元素的style属性中。这种方式适用于简单的样式调整但不推荐广泛使用因为它会使得HTML文档结构混乱且不利于维护。 p stylecolor: red;这段文字是红色的。/p内部样式表在HTML文档的head部分使用style标签定义CSS规则。这种方式适用于单个页面的样式设置便于统一管理页面内的样式但不适用于多个页面共享样式。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titleheadstylep {color: blue;}/style/head
/head
bodyp这段文字是红色的。/p
/body
/html外部样式表将CSS规则写在一个单独的.css文件中然后在HTML文档的head部分通过link标签引入该文件。这是最常用也是推荐的方式因为它可以方便地让多个HTML页面共享相同的样式易于维护和修改。 !-- HTML 文件 --
headlink relstylesheet hrefstyles.css
/head!-- styles.css 文件 --
p {color: green;
}import在CSS文件中使用import语句导入其他CSS文件。这种方式可以在一个CSS文件中引入另一个CSS文件的内容但建议谨慎使用因为它可能会增加额外的HTTP请求影响页面加载速度。通常情况下直接在HTML中使用link标签更为推荐。 /* main.css */
import url(other-styles.css);/* other-styles.css */
h1 {font-size: 24px;
}每种导入方式有其适用场景选择时应根据项目需求和最佳实践来决定。 三、语法结构
CSS的基本语法包括选择器和声明块如下所示
selector {property: value;/* 更多属性声明 */
}示例
h1 {color:red;font-size:14px;
}选择器指定CSS规则应用到哪些HTML元素上。选择器可以是元素名、类名、ID、属性选择器、伪类或组合选择器等。声明由属性名和值组成用于设定元素的具体样式。值可以是预定义的关键字、颜色代码、长度单位、百分比等。 四、选择器类型
基本选择器 元素标签选择器直接通过HTML元素名称来选择元素例如 p 会选择所有段落元素。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 内部样式表 --stylep {color: red;}/style
/head
bodyp我是p1。/pp我是p2。/pp我是p3。/pp我是p3。/p
/body
/html类选择器以.开头用于选择具有指定类属性的元素如 .p1。 ID选择器以#开头用于选择具有特定ID属性的元素ID在文档中必须是唯一的如 #uniqueID。 通用选择器通配符使用*可以匹配任何元素但通常不推荐过度使用因为它会影响性能。 示例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 内部样式表 --style.p1 {color: red;}#p2 {color: green;}/style
/head
bodyp classp1我是class选择器。/pp id#p2我是id选择器。/p
/body
/html组合选择器
后代选择器使用空格分隔选择父元素内部的所有后代元素如 div p 选择所有div内的p元素。子选择器使用表示仅选择直接子元素如 ul li。相邻兄弟选择器使用表示选择紧接在另一个元素后的同级元素如 h1 p。通用兄弟选择器使用~表示选择所有跟在指定元素之后的同级元素如 h1 ~ p。
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 后代选择器 */div p {color: red;}/* 子选择器 */ul li {color: green;}/* 相邻兄弟选择器 */h1 p {color: blue; }/* 通用兄弟选择器 */h2 ~ p {color: brown;}/style
/head
bodydivp我是第一个后代/pp我是第二个后代/pp我是第三个后代/p/divulli我是子选择器/li/ulh1/h1p相邻兄弟选择器/ph2/h2p兄弟一/pp兄弟二/p
/body
/html伪类与伪元素
伪类用于表示元素的特定状态如 a:hover 表示链接在鼠标悬停时的状态。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylea:hover{background-color: red;}/style
/head
bodya href#超链接/a
/body
/html伪元素用于创建或修饰元素的某些部分如 ::before, ::after常用于插入内容或装饰。
属性选择器
根据元素的属性及属性值来选择元素如 [typetext] 选择所有type属性为text的输入元素。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle[typebutton] {background-color: pink;}/style
/head
bodyinput typebutton value按钮
/body
/html六、选择器优先级 看下图,你发现了什么 内联样式直接在HTML元素的style属性中定义的样式具有最高优先级优先级记为1000。 ID选择器以#开头的选择器优先级为100。 类选择器、属性选择器、伪类选择器包括.class、[attributevalue]、:hover等优先级为10。 标签选择器、伪元素选择器如div、p、:before、:after等优先级为1。 通配符选择器、关系选择器、否定选择器优先级更低一般不在优先级直接比较的讨论范围内但在实际计算中也有其位置。 继承的样式没有直接指定通过父元素传递的样式优先级最低。 重要声明 (!important)任何声明如果在其值后加上!important这个声明将拥有最高优先级覆盖所有其他优先级但应谨慎使用因为它会破坏样式的可维护性。
总结
重要声明 (!important) 内嵌 ID 类选择器、属性选择器、伪类选择器 标签选择器、伪元素选择器
六、CSS属性 CSS属性及其值非常繁多下面我列出一些主要属性分类及其代表性的属性和属性值。 1. 字体与文本属性
font-family: 定义字体系列例如 Arial, sans-serif.font-size: 设置字体大小例如 16px, 1.5em, 100%.font-weight: 字体粗细例如 normal, bold, 100 到 900.color: 文本颜色例如 red, #ff0000, rgb(255, 0, 0).text-align: 文本对齐方式例如 left, center, right, justify.line-height: 行间距例如 1.5, normal.
2. 背景属性
background-color: 背景色例如 #333, rgb(51, 51, 51).background-image: 背景图片路径例如 url(image.jpg).background-repeat: 图片重复方式例如 repeat, no-repeat, repeat-x.background-position: 图片位置例如 center, 10px 20px.
3. 尺寸与盒模型属性
width 和 height: 宽度和高度例如 auto, 300px, 50%.padding: 内边距例如 10px 20px 30px 40px (上右下左).margin: 外边距同上.border: 边框例如 1px solid #000.
4. 布局与定位
display: 显示类型例如 block, inline, inline-block, flex, grid.position: 定位类型例如 static, relative, absolute, fixed.top, right, bottom, left: 定位偏移量例如 10px.
5. 列表样式
list-style-type: 列表项标记类型例如 disc, square, none.list-style-position: 标记位置例如 inside, outside.
6. 边框与轮廓
border-radius: 圆角边框例如 5px, 20%.box-shadow: 盒阴影例如 2px 2px 5px rgba(0, 0, 0, 0.3).
7. 文本装饰与效果
text-decoration: 文本装饰例如 underline, overline, none.text-transform: 文本转换例如 uppercase, lowercase, capitalize.
8. 动画与过渡
transition: 过渡效果例如 all 0.5s ease.animation: 动画例如 spin 2s linear infinite.
9. 伪类与伪元素
:hover: 鼠标悬停状态.::before, ::after: 在元素之前或之后插入内容.
10. 其他
opacity: 不透明度例如 0.5.visibility: 可见性例如 visible, hidden.cursor: 鼠标指针形状例如 pointer, crosshair.
七、盒子模型 盒子模型是一种核心的布局概念用于描述网页中元素的布局方式。每个HTML元素都可以被视作一个矩形盒子这个盒子由以下几个部分组成 内容区域Content 这是盒子的核心部分包含了元素的实际内容比如文本、图片等。内容区域的大小可以通过width和height属性来设置。 内边距Padding 内边距是内容区域与边框之间的空间。它可以帮助增加内容与边框的距离提升视觉效果。内边距可以分别设置上、右、下、左边距也可以统一设置使用padding属性。 边框Border 边框围绕着内容区域和内边距提供了元素的边界。边框可以设置样式solid、dashed、dotted等、宽度和颜色使用border属性或其衍生属性如border-width、border-style、border-color来定义。 外边距Margin 外边距是盒子与其他元素之间的空白区域用来控制元素之间的距离。和内边距一样外边距也可以分别设置上、右、下、左边距或者统一设置使用margin属性。
