什么是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相关推荐

  1. CSS3(Cascading Style Sheet) 层叠样式表

    CSS是Cascading Style Sheet 层叠样式表或级联样式表,简称"样式表".利用样式可以定义页面的样式,大大减少网页的设计工作量.也可以美化页面,精准定制页面的布局 ...

  2. CSS cascading style sheet

    html+css+javascript 结构+表现+交互 css怎么用(快速入门) css选择器(重点,难点) 美化网页(文字,阴影,超链接,列表,渐变) 盒子模型 浮动 定位 网页动画(特效)非重点 ...

  3. CSS(Cascading Style Sheet)总结

    CSS 层叠样式表 (Cascading Style Sheet) 1.字体设置: 有继承性,给父元素设置,子元素可继承. (1)字体倾斜:font-style:normal/italic (2)字体 ...

  4. CSS(Cascading Style Sheet)

    文章目录 CSS(Cascading Style Sheet) 使用方式 基本语法 颜色写法 选择器*** 标签选择器 id选择器 类选择器 选择器分组 层次选择器 伪类 pseudo-classes ...

  5. css sheet2.0,详解CSS3.0(Cascading Style Sheet) 层叠级联样式表

    CSS3.0(Cascading Style Sheet) 层叠级联样式表 快速入门: CSS01 h1 { color: red; } 标题一 CSS的三种导入方式: 行内样式(优先级最高,但不建议 ...

  6. CSS(层叠样式表cascading style sheet)——CSS样式、基础选择器

    一.CSS作用 对页面的外观进行美化 统一网站页面的风格 实现内容和样式的分离,适合团队开发 二.CSS语法规范 三.CSS引入方式   CSS的3种样式表 书写位置的不同分为:行内样式表(行内式) ...

  7. CSS(Cascading Style Sheets) 层叠样式表

    CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式. CSS以HTM ...

  8. cascading style sheet第一课

    css引入方式: 1.内嵌式,写到<head>里面,<style>.(小案例适用) 2.外联式:写在单独的css文件中,通过link标签引入.(head里写<link r ...

  9. Cascading Style Sheet 层叠级联样式表

    CSS发展史 CSS:表现(美化网页) CSS2.0 DIV(块)+CSS,HTML与CSS结构分离的思想,网页变得简单,SEO CSS2.1 浮动,定位 CSS3.0 圆角,阴影,动画....游览器 ...

最新文章

  1. R语言指数分布(exponential distribution)函数(dexp, pexp, qexp rexp)实战
  2. 天翼云从业认证(2.3)云计算的价值和核心技术。
  3. The ultimate end-to-end tutorial to create and deploy a fully decentralized Dapp in ethereum
  4. 【CodeForces - 616D 】Longest k-Good Segment (twopointer,尺取)
  5. 软件测试项目计划书总结,软件测试项目计划书.doc
  6. vue标签旋转_vue.js编写移动端页面,检测旋转屏幕,横竖屏。
  7. html css 样式中100%width 仍有白边解决办法
  8. window7 64位下Android studio 安装genymotion模拟器
  9. 清华大学操作系统OS学习(六)——进程和线程
  10. UDP socket--bind
  11. 【图文说明】屏幕录像专家如何安装、录制小文件的录像
  12. Javascript闭包 ,JS中没有public,private等修饰词,里面的变量就分为globle和局部变量
  13. 期刊分类abcde_收藏!中文顶级期刊分类,多图教你不被ABCD类搞晕!
  14. vue项目总使用高德API的轨迹展示巡航
  15. 51单片机延时程序的延时时间计算
  16. 2021年中国农副食品加工行业现状分析:营业利润同比增长3.7%[图]
  17. 2019年上半年云桌面排名前五企业
  18. mysql下载64位 太平洋,Win10 64位安装MySQL5.6.35的详细教程
  19. LUA语言教程 [转]
  20. 书包网小说多线程爬虫

热门文章

  1. 解密DNA机器人“巨大的一小步”:血液循环中精准送达药物
  2. 数字藏品火爆背后:平台密集涌现 专家提醒风险
  3. 神经网络 mse一直不变_基于关系网络的视觉建模:有望替代卷积神经网络
  4. Android仿美团选择城市
  5. 聊天功能获取聊天记录列表并展示最新一条聊天记录
  6. C++/数据结构——课程设计——回合制对战小游戏
  7. Syncaila教程_如何从NLE导出XML?
  8. 支持超级兔子,鄙视Yahoo!
  9. sql 查询当前订单是第几笔订单
  10. 笨鸟先飞学编程系列之二 基础代码的编写1(转)