什么是CSS,有什么作用?\nCSS(Cascading Style Sheet):层叠样式表语言。\nCSS的作用是:\n修饰HTM
什么是CSS,有什么作用?\nCSS(Cascading Style Sheet):层叠样式表语言。\nCSS的作用是:\n修饰HTML页面,修饰HTML页面张的某些元素的样式,让HTML页面更好看。\nCSS好比是HTML的化妆品一样。\nHTML还是主体,CSS依赖HTML。CSS的存在就是修饰HTML。所以新建的文件还是xxx.html文件。\nCSS我们要求掌握到什么程序?\n常见的CSS样式要求会写。\n别人写的CSS样式要能看懂。\n在HTML页面中嵌套使用CSS的三种方式\n第一种方式:在标签内部使用style属性来设置元素的CSS样式,这种方式称为内联定义方式。\n语法格式:\n\u003C标签> style=\"样式名:样式值;样式名:样式值;样式名:样式值;...\"\u003C/标签>\t\n1\n第二种方式:在head标签中使用style块,这种方式称为样式块方式。\n语法格式:\n\u003Chead>\n\t\u003Cstyle type=\"text/css\">\n\t\t选择器{\n\t\t\t样式名 : 样式值;\n\t\t\t样式名 : 样式值;\n\t\t\t......\n\t\t}\n\t\t选择器{\n\t\t\t样式名 : 样式值;\n\t\t\t样式名 : 样式值;\n\t\t\t......\n\t\t}\n\t\u003C/style>\n\u003C/head>\n1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n第三种方式:链入外部样式表文件,这种方式最常用。(将样式写到一个独立的xxx.css文件当中,在需要的网页上直接引入css文件,样式就引入了)\n这种方式容易维护,维护成本较低。\nxxx.css文件\n1.html中引入了\n2.html中引入了\n3.html中引入了\n4.html中引入了\n语法格式:\n\u003Clink type=\"text/css\" rel=\"stylesheet\" href=\"css文件的路径\"/>\n1\nHTML中引入CSS样式的第一种方式\n\u003C!doctype html>\n\u003Chtml>\n\t\u003Chead>\n\t\t\u003Ctitle>HTML中引入CSS样式的第一种方式:内联定义方式\u003C/title>\n\t\u003C/head>\n\t\u003Cbody>\n\t\t\n\t\t\u003C!--\n\t\t\twidth 宽度样式\n\t\t\theight 高度样式\n\t\t\tbackground-color 背景色样式\n\t\t\tdisplay 布局样式 (none表示隐藏,block表示显示)\n\n\t\t-->\n\t\t\u003Cdiv style=\"width : 300px; height : 300px; background-color : #CCFFFF; display : block; border-color : red; border-width : 1px; border-style : solid\">\u003C/div>\n\n\t\t\u003Cbr>\u003Cbr>\n\t\t\n\t\t\u003C!--\n\t\t\t边框样式还能这样写:\n\t\t\t\tborder : 1px solid black;\n\t\t-->\n\t\t\u003Cdiv style=\"width : 300px; height : 300px; background-color : #CCFFFF; display : block; border : 1px solid black\">\u003C/div>\n\n\n\t\u003C/body>\n\u003C/html>\n1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\nHTML中引入CSS样式的第二种方式\n\u003C!doctype html>\n\u003Chtml>\n\t\u003Chead>\n\t\t\u003Ctitle>HTML中引入CSS样式的第二种方式:样式块\u003C/title>\n\n\t\t\u003Cstyle type=\"text/css\">\n\t\t\t/*\n\t\t\t\t这是CSS的注释\n\t\t\t*/\n\t\t\t/*\n\t\t\t\tid选择器\n\t\t\t\t语法格式:\n\t\t\t\t\t#id{\n\t\t\t\t\t\t样式名 : 样式值;\n\t\t\t\t\t\t样式名 : 样式值;\n\t\t\t\t\t\t样式名 : 样式值;\n\t\t\t\t\t\t...\n\t\t\t\t\t}\n\t\t\t*/\n\t\t\t#usernameErrorMsg {\n\t\t\t\tcolor : red;\n\t\t\t\tfont-size : 12px;\n\t\t\t}\n\n\t\t\t/*\n\t\t\t\t标签选择器\n\t\t\t\t语法格式:\n\t\t\t\t\t标签名{\n\t\t\t\t\t\t样式名 : 样式值;\n\t\t\t\t\t\t样式名 : 样式值;\n\t\t\t\t\t\t样式名 : 样式值;\n\t\t\t\t\t\t...\n\t\t\t\t\t}\n\t\t\t\t标签选择器作用的范围比id选择器广。\n\t\t\t*/\n\t\t\tdiv {\n\t\t\t\tbackground-color : black;\n\t\t\t\tborder : 1px solid red;\n\t\t\t\twidth : 100px;\n\t\t\t\theight : 100px;\n\t\t\t}\n\n\t\t\t/*\n\t\t\t\t类选择器\n\t\t\t\t语法格式:\n\t\t\t\t\t.类名{\n\t\t\t\t\t\t样式名 : 样式值;\n\t\t\t\t\t\t样式名 : 样式值;\n\t\t\t\t\t\t样式名 : 样式值;\n\t\t\t\t\t\t...\n\t\t\t\t\t}\n\t\t\t*/\n\t\t\t.myclass{\n\t\t\t\tborder : 1px solid red;\n\t\t\t\twidth : 400px;\n\t\t\t\theight : 30px;\n\t\t\t}\n\t\t\t\n\n\t\t\n\t\t\u003C/style>\n\t\u003C/head>\n\t\u003Cbody>\n\t\t\n\t\t\u003C!--\n\t\t\t设置样式字体大小12px,颜色为红色!\n\t\t-->\n\t\t\u003Cspan id=\"usernameErrorMsg\">对不起,用户名不能为空!\u003C/span>\n\n\t\t\u003Cdiv>\u003C/div>\n\t\t\u003Cdiv>\u003C/div>\n\t\t\u003Cdiv>\u003C/div>\n\n\t\t\u003Cbr>\n\t\t\u003C!--class相同的标签,可以认为是同一类标签-->\n\t\t\u003Cinput type=\"text\" class=\"myclass\"/>\n\n\t\t\u003Cbr>\u003Cbr>\n\nclass=\"myclass\">\n\t\t\t\u003Coption>专科\u003C/option>\n\t\t\t\u003Coption>本科\u003C/option>\n\t\t\u003C/select>\t\n\t\n\n\t\u003C/body>\n\u003C/html>
什么是CSS,有什么作用?\nCSS(Cascading Style Sheet):层叠样式表语言。\nCSS的作用是:\n修饰HTM相关推荐
- CSS3(Cascading Style Sheet) 层叠样式表
CSS是Cascading Style Sheet 层叠样式表或级联样式表,简称"样式表".利用样式可以定义页面的样式,大大减少网页的设计工作量.也可以美化页面,精准定制页面的布局 ...
- CSS cascading style sheet
html+css+javascript 结构+表现+交互 css怎么用(快速入门) css选择器(重点,难点) 美化网页(文字,阴影,超链接,列表,渐变) 盒子模型 浮动 定位 网页动画(特效)非重点 ...
- CSS(Cascading Style Sheet)总结
CSS 层叠样式表 (Cascading Style Sheet) 1.字体设置: 有继承性,给父元素设置,子元素可继承. (1)字体倾斜:font-style:normal/italic (2)字体 ...
- CSS(Cascading Style Sheet)
文章目录 CSS(Cascading Style Sheet) 使用方式 基本语法 颜色写法 选择器*** 标签选择器 id选择器 类选择器 选择器分组 层次选择器 伪类 pseudo-classes ...
- css sheet2.0,详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
CSS3.0(Cascading Style Sheet) 层叠级联样式表 快速入门: CSS01 h1 { color: red; } 标题一 CSS的三种导入方式: 行内样式(优先级最高,但不建议 ...
- CSS(层叠样式表cascading style sheet)——CSS样式、基础选择器
一.CSS作用 对页面的外观进行美化 统一网站页面的风格 实现内容和样式的分离,适合团队开发 二.CSS语法规范 三.CSS引入方式 CSS的3种样式表 书写位置的不同分为:行内样式表(行内式) ...
- CSS(Cascading Style Sheets) 层叠样式表
CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式. CSS以HTM ...
- cascading style sheet第一课
css引入方式: 1.内嵌式,写到<head>里面,<style>.(小案例适用) 2.外联式:写在单独的css文件中,通过link标签引入.(head里写<link r ...
- Cascading Style Sheet 层叠级联样式表
CSS发展史 CSS:表现(美化网页) CSS2.0 DIV(块)+CSS,HTML与CSS结构分离的思想,网页变得简单,SEO CSS2.1 浮动,定位 CSS3.0 圆角,阴影,动画....游览器 ...
最新文章
- R语言指数分布(exponential distribution)函数(dexp, pexp, qexp rexp)实战
- 天翼云从业认证(2.3)云计算的价值和核心技术。
- The ultimate end-to-end tutorial to create and deploy a fully decentralized Dapp in ethereum
- 【CodeForces - 616D 】Longest k-Good Segment (twopointer,尺取)
- 软件测试项目计划书总结,软件测试项目计划书.doc
- vue标签旋转_vue.js编写移动端页面,检测旋转屏幕,横竖屏。
- html css 样式中100%width 仍有白边解决办法
- window7 64位下Android studio 安装genymotion模拟器
- 清华大学操作系统OS学习(六)——进程和线程
- UDP socket--bind
- 【图文说明】屏幕录像专家如何安装、录制小文件的录像
- Javascript闭包 ,JS中没有public,private等修饰词,里面的变量就分为globle和局部变量
- 期刊分类abcde_收藏!中文顶级期刊分类,多图教你不被ABCD类搞晕!
- vue项目总使用高德API的轨迹展示巡航
- 51单片机延时程序的延时时间计算
- 2021年中国农副食品加工行业现状分析:营业利润同比增长3.7%[图]
- 2019年上半年云桌面排名前五企业
- mysql下载64位 太平洋,Win10 64位安装MySQL5.6.35的详细教程
- LUA语言教程 [转]
- 书包网小说多线程爬虫