商城网站建设明细,wordpress智能更新插件,wordpress宽屏插件,徐州百姓网目录 1. CSS概述
2. CSS引入方式
3. CSS颜色显示
4. CSS选择器
4.1. 元素#xff08;标签#xff09;选择器
4.2. id选择器
4.3. 类选择器
4.4. 三者优先级
5. 盒子模型 1. CSS概述
CSS#xff0c;全称为“Cascading Style Sheets”#xff0c;中文译为“层叠样式…目录 1. CSS概述
2. CSS引入方式
3. CSS颜色显示
4. CSS选择器
4.1. 元素标签选择器
4.2. id选择器
4.3. 类选择器
4.4. 三者优先级
5. 盒子模型 1. CSS概述
CSS全称为“Cascading Style Sheets”中文译为“层叠样式表”。
CSS是一种用于描述HTML或XML包括SVG、MathML等衍生技术文档样式的计算机语言。它被设计出来主要是为了分离文档的内容written in HTML or a similar markup language与文档的呈现样式如更详细的布局和设计并且有多种样式可以应用于在不同设备上浏览的网页。这种分离可以提高内容的可访问性提供更多的布局和视觉效果的控制并允许控制样式信息的复杂性而不需要结构化的文档内容通过杂乱的样式信息进行展示。
具体来说CSS能够
对网页中元素的位置进行像素级的精确控制排版使得设计师可以精确地确定元素的位置和大小。支持几乎所有的字体和字号样式。这意味着设计师可以自由选择他们想要的字体样式为网页设计提供更丰富的视觉效果。拥有对网页对象和模型样式编辑的能力。设计师不仅可以改变元素的颜色、字体还可以对其进行更复杂的3D变换、动画等效果。 一个有CSS和没有CSS的代码对比示例
!DOCTYPE html
html
head title没有CSS的示例/title
/head
body h1欢迎来到我的网站/h1 p这是一个没有CSS的段落。/p p这是另一个没有CSS的段落。/p
/body
/html !DOCTYPE html
html
head title有CSS的示例/title style body { font-family: Arial, sans-serif; background-color: #f2f2f2; } h1 { color: #336699; text-align: center; } p { font-size: 16px; line-height: 1.5; color: #666666; } /style
/head
body h1欢迎来到我的网站/h1 p这是一个使用CSS美化的段落。/p p这是另一个使用CSS美化的段落。/p
/body
/html 2. CSS引入方式
在HTML中有三种常见的方式来引入CSS样式 名称 语法描述 示例 行内样式 在标签内使用style属性属性值是css属性键值对 h1 stylexxx:xxx;中国新闻网/h1 内嵌样式 定义style标签在标签内部定义css样式 style h1 {...} /style 外联样式 定义link标签通过href属性引入外部css文件 link relstylesheet hrefcss/news.css
内联样式Inline Styles直接在HTML元素中使用style属性来定义CSS样式。这种方式直接在元素上应用样式不需要额外的样式表文件。例如
p stylecolor: red;这是一个红色的段落。/p 内部样式表Internal Stylesheet在HTML文档的head部分使用style标签来包含CSS规则。这种方式适合单个页面的样式定义。例如
!DOCTYPE html
html
head style p { color: blue; } /style
/head
body p这是一个蓝色的段落。/p
/body
/html 外部样式表External Stylesheet通过link标签在HTML文档中引入外部的CSS文件。这种方式适合多个页面共享相同样式的情况因为样式被定义在一个独立的文件中可以被多个页面引用。例如
!DOCTYPE html
html
head link relstylesheet hrefstyles.css
/head
body p这是一个有样式的段落。/p
/body
/html
而在styles.css这个外部文件中
p { color: green;
} 一般来说外部样式表是最推荐的方式因为它可以让样式和内容分离提高代码的可维护性和复用性。但当样式仅在一个元素或少数元素上应用时使用内联样式也是不错的选择。如果样式只在单个页面中使用内部样式表是一个合适的选择。 3. CSS颜色显示
在前端程序开发中颜色的表示方式常见的有如下三种 表示方式 表示含义 取值 关键字 预定义的颜色名 red、green、blue... rgb表示法 红绿蓝三原色每项取值范围0-255 rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0) 十六进制表示法 #开头将数字转换成十六进制表示 #000000、#ff0000、#cccccc简写#000、#ccc
关键字
!DOCTYPE html
html
headstyle.keyword-color {background-color: red;color: white;padding: 20px;}/style
/head
bodydiv classkeyword-color这个div的背景色是通过关键字red设置的/div
/body #这部分是解释文字不需要放在代码中
/html rgb表示法
!DOCTYPE html
html
headstyle.rgb-color {background-color: rgb(0, 255, 0);color: rgb(0, 0, 255);padding: 20px;}/style
/head
body #这部分是body标签的开始div classrgb-color这个div的背景色和字体色是通过rgb表示法设置的/div
/body #这部分是body标签的结束
/html 十六进制表示法
!DOCTYPE html
html
headstyle.hex-color {background-color: #00ff00; /* 绿色 */color: #0000ff; /* 蓝色 */padding: 20px;}/style
/head
bodydiv classhex-color这个div的背景色和字体色是通过十六进制表示法设置的/div
/body
/html 4. CSS选择器
顾名思义选择器是选取需设置样式的元素标签但是我们根据业务场景不同选择的标签的需求也是多种多样的所以选择器有很多种因为我们是做后台开发的所以对于css选择器我们只学习最基本的3种。
选择器通用语法如下
选择器名 {css样式名css样式值;css样式名css样式值;
}
下面所讲到的选择器只是常见的选择器是有很多种的CSS2中定义了15种不同的元素选择器而CSS3则增加了7种。 4.1. 元素标签选择器
选择器的名字必须是标签的名字如p、div、h1....作用选择器中的样式会作用于所有同名的标签上
p这是一个p元素/p
p { color: blue;
}
!--CSS样式将应用于所有p元素--
h1, div {color: blue;
}
!--将所有的h1和div元素的文本颜色设置为蓝色--
!DOCTYPE html
html
headtitle元素选择器示例/titlestyle typetext/css/* 使用元素选择器选取所有的段落 */p {color: red;}/style
/head
bodyh1这是一个标题/h1p这是一个段落。/pp这是另一个段落。/p
/body
/html 4.2. id选择器
id选择器的名字前面需要加上#作用选择器中的样式会作用于指定id的标签上而且有且只有一个标签由于id是唯一的
div idmyID这是一个带有ID的div元素/div
#myID { color: red;
}
上述代码中ID选择器使用#符号作为前缀后面跟着元素的ID名称myID。CSS样式将应用于具有该ID的元素。 4.3. 类选择器
选择器的名字前面需要加上 . 看清楚这是一个点作用选择器中的样式会作用于所有class的属性值和该名字一样的标签上可以是多个
p classmyClass这是一个带有类的p元素/p
.myClass { font-size: 20px;
}
上述代码中类选择器使用.符号作为前缀后面跟着元素的类名myClass。CSS样式将应用于具有该类的所有元素。 4.4. 三者优先级
id选择器优先级最高。id选择器通过HTML元素的id属性来选择元素因此它非常精确且针对性强。由于id在HTML文档中应该是唯一的所以使用id选择器可以非常准确地定位到特定的元素并为其应用样式。类选择器优先级次之。类选择器使用HTML元素的class属性来选择元素。不同于id的唯一性class可以在多个元素上使用因此类选择器可以用来为一组具有相似样式的元素定义样式。它的优先级高于元素选择器但低于id选择器。元素选择器优先级最低。元素选择器基于HTML元素的标签名来选择元素。例如p选择器会选择所有的段落元素。元素选择器的优先级是最低的当它与id选择器和类选择器同时存在时它的样式规则将被覆盖。 5. 盒子模型
CSS盒模型本质上是一个盒子封装周围的HTML元素它包括边距margin边框border填充padding和实际内容content
边距Margin边距是盒子外部的空间它代表着盒子与其他元素之间的距离。这个空间是透明的意味着背景会延伸至边距区域。通过调整边距的大小你可以控制元素间相互的空隙从而决定它们之间的紧密程度或分离程度。边框Border紧邻边距内侧的是边框它为元素提供了一个外部的轮廓。这个边框围绕着内边距和内容。你可以根据设计需求设定边框的粗细、颜色及样式使其更为突出或低调。填充Padding填充位于边框的内侧它代表了边框与内容之间的空间。这个空间同样是透明的它的存在确保了内容与边框之间有一定的距离。调整填充的大小能够帮助你控制内容与边框之间的空隙确保内容的呈现更为集中或分散。实际内容Content实际内容是盒子的核心它呈现了元素的真实信息如文本、图片等。这个区域的大小和内容会根据实际内容的变化而变化。确保内容的呈现清晰、易读是设计的首要任务。 完整代码示例
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /style.outerDiv {width: 800px;height: 300px;border: 1px solid green;background-color: rgb(230, 224, 224);margin: 0px auto;}.innerDiv {width: 100px;height: 100px;border: 1px solid blue;float: left;/* margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px; */margin: 10px 20px 30px 40px;}.d1 {background-color: greenyellow;/* padding-top: 10px;padding-right: 20px;padding-bottom: 30px;padding-left: 40px; */padding: 10px 20px 30px 40px;}.d2 {background-color: rgb(79, 230, 124);}.d3 {background-color: rgb(26, 165, 208);}/style/headbodydiv classouterDivdiv classinnerDiv d1框1/divdiv classinnerDiv d2框2/divdiv classinnerDiv d3框3/div/div/body
/html浏览器打开F12开发者工具台
