全国建设厅网站,百度有做企业网站吗,厂房网行业门户网站建设策划方案ppt,基本的网站开发技术大家好#xff0c;欢迎来到无限大的频道。
今天继续带领大家开始0基础学前端。 一、CSS简介与基础
层叠样式表#xff08;CSS#xff0c;Cascading Style Sheets#xff09;是用来进行网页样式和布局设计的语言。通过CSS#xff0c;开发者可以控制网页中元素的颜色、字体…
大家好欢迎来到无限大的频道。
今天继续带领大家开始0基础学前端。 一、CSS简介与基础
层叠样式表CSSCascading Style Sheets是用来进行网页样式和布局设计的语言。通过CSS开发者可以控制网页中元素的颜色、字体、大小、间距以及布局等视觉效果。CSS让页面不仅仅是信息的载体还能提升用户的视觉体验和交互感受。
1. CSS的基本语法
CSS由选择器和声明块组成。选择器用于指定要设置样式的HTML元素。声明块包含一个或多个声明各声明用分号分隔。每个声明包括一个属性和一个值属性和值用冒号分隔。
选择器 {属性: 值;属性: 值;
}
例如
h1 {color: blue;font-size: 24px;
}
上面的代码将所有的一级标题h1文本颜色设置为蓝色字体大小设置为24像素。
2. 常见的选择器
- 元素选择器选中所有该类型的HTML元素例如div、p。 - 类选择器使用 . 加类名选中例如.my-class这需要HTML中相应元素有classmy-class。 - ID选择器使用 # 加ID名例如#my-id这需要HTML中相应元素有idmy-id。 - 组合选择器可以组合多个选择器应用于需要灵活定义样式的场景。
关于类选择器和ID选择器的区别我会再发一篇文章来和大家说明
3. CSS样式的继承与优先级
CSS样式表中的样式可以从父元素继承给子元素。
例如设置在body上的字体颜色会继承给p等子元素。
的选择器优先级依次为ID选择器 类选择器 元素选择器。
此外在冲突时后定义的样式会覆盖此前定义的样式。 二、基础CSS布局及样式
在这部分我们将结合昨天的HTML代码通过简要的内嵌CSS样式进行页面基础布局同时展示如何使用外部CSS文件来实现更复杂的样式。
1. 内嵌CSS示例
先在HTML的head部分中通过style标签添加CSS展示页面布局
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title我的个人主页/titlestylebody {font-family: Arial, sans-serif;margin: 0;padding: 0;line-height: 1.6;}header {background-color: #333;color: #fff;padding: 10px 0;text-align: center;}main {padding: 20px;}h2 {color: #555;}ul {list-style-type: none;}li {margin-bottom: 10px;}a {text-decoration: none;color: #0066cc;}footer {background-color: #333;color: #fff;text-align: center;padding: 10px 0;position: fixed;bottom: 0;width: 100%;}/style
/head
bodyheaderh1欢迎来到我的个人主页/h1/headermainsectionh2关于我/h2p你好我是一个前端开发的初学者正在学习如何创建美观且有用的网页。/p/sectionsectionh2爱好与兴趣/h2ulli编程/lili阅读/lili旅行/li/ul/sectionsectionh2查看我的作品/h2p以下是一些我最近完成的项目/pullia hrefhttps://我的项目链接.com我的第一个项目/a/lilia hrefhttps://一个有趣的项目.com一个有趣的项目/a/li/ul/sectionfigureimg srchttps://wxdwuxd.oss-cn-beijing.aliyuncs.com/4027b724a62b206a73ba495e732af2b.jpg alt我的个人写真figcaption摄影无限大/figcaption/figure/mainfooterp联系我a hrefhttps://blog.csdn.net/wxdzuishaui?spm1010.2135.3001.5343我的博客/a/p/footer
/body
/html2. 外部CSS示例
在实际开发中使用外部CSS文件管理样式更为常见。我们将上述内嵌样式移到一个外部文件中比如styles.css并在HTML中引入它‘
我们创立一个名为styles.css的文件
body {font-family: Arial, sans-serif;margin: 0;padding: 0;line-height: 1.6;
}
header {background-color: #333;color: #fff;padding: 10px 0;text-align: center;
}
main {padding: 20px;
}
h2 {color: #555;
}
ul {list-style-type: none;
}
li {margin-bottom: 10px;
}
a {text-decoration: none;color: #0066cc;
}
footer {background-color: #333;color: #fff;text-align: center;padding: 10px 0;position: fixed;bottom: 0;width: 100%;
}HTML文件更新
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title我的个人主页/titlelink relstylesheet hrefstyles.css
/head
bodyheader/headerh1欢迎来到我的个人主页/h1/headermainsectionh2关于我/h2p你好我是一个前端开发的初学者正在学习如何创建美观且有用的网页。/p/sectionsectionh2爱好与兴趣/h2ulli编程/lili阅读/lili旅行/li/ul/sectionsectionh2查看我的作品/h2p以下是一些我最近完成的项目/pullia hrefhttps://我的项目链接.com我的第一个项目/a/lilia hrefhttps://一个有趣的项目.com一个有趣的项目/a/li/ul/sectionfigureimg srchttps://wxdwuxd.oss-cn-beijing.aliyuncs.com/4027b724a62b206a73ba495e732af2b.jpg alt我的个人写真figcaption摄影无限大/figcaption/figure/mainfooterp联系我a hrefhttps://blog.csdn.net/wxdzuishaui?spm1010.2135.3001.5343我的博客/a/p/footer
/body
/html三、使用HTML和CSS创建精美的页面
接下来我们创建一个更加精美的页面还是有点简陋后面的几天希望我们一起越做越好介绍NBA球星凯文·杜兰特Kevin Durant。
ps我个人最喜欢篮网杜我的意难平“凯文杜兰特”“他投出了一个最长的两分球”
Kevin Durant页面HTML
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title凯文·杜兰特/titlelink relstylesheet hrefkevin.css
/head
bodyheaderh1凯文·杜兰特/h1/headermainsection classimageimg srchttps://wxdwuxd.oss-cn-beijing.aliyuncs.com/6fa6ec013f49061e5c313827b6099f2.png alt凯文·杜兰特/sectionsection classbioh2简介/h2p凯文·杜兰特是NBA著名篮球运动员司职小前锋曾多次获得NBA总冠军和MVP。/p/sectionsection classachievementsh2成就/h2ulli两届NBA总冠军/lili四届NBA得分王/lili两届总决赛MVP/liliNBA常规赛MVP/li/ul/section/mainfooterp© 2024 凯文·杜兰特粉丝页面/p/footer
/body
/html
Kevin Durant页面CSS
body {font-family: Roboto, sans-serif;color: #333;margin: 0;padding: 0;
}header {background-color: #181e25;color: #fff;text-align: center;padding: 20px;
}main {padding: 20px;display: flex;justify-content: space-between;
}.image img {max-width: 300px;border-radius: 10px;
}.bio, .achievements {width: 40%;
}h1, h2 {margin-top: 0;
}ul {list-style-type: square;
}footer {background-color: #181e25;color: #fff;text-align: center;padding: 10px;position: fixed;bottom: 0;width: 100%;
}
