牛腩之CSS简介_html/css_WEB-ITnose
程序员文章站
2022-04-17 19:39:29
...
在没有接触CSS之前,我们使用Html写网页是这样写的:
CSS测试
HTML是一种标记语言
运行结果如下:
这样写出来的网页灵活性几乎没有,如果我们要更改网页的显示效果,那么我们就要找到网页源码相应的地方进行修改,如果这样的网页有成千上万个,难道我们就这样一个一个滴慢慢滴去修改吗?NO!
传统的写法将内容与样式写在了一起,用我们的俗话说就是写死了,可维护性实在是太差了。我们应该想办法让文字内容与其显示的效果的定义分开,这时候CSS来了,它的最大特点就是将Web页面的内容和样式进行分离,从而能够灵活的修改页面显示效果,这个类似于我们之前接触过的配置文件config。具体如何做呢?往下看
首先要添加一个样式表,如下图所示
然后在StyleSheet1.css里面写如下代码:
body { font-size :40px; /*设置字体大小*/ color :blue ; /*设置字体颜色*/ text-decoration :underline ; /*设置字体加下划线*/ font-weight :bold ; /*设置字体加粗*/ text-align :center ; /*设置字体居中显示*/}
之后我们对html文件里的代码进行修改:
运行结果如下:
这就是所谓的CSS技术,通过在样式表中设置web页面的样式,来控制页面的显示效果,这样如果要更改显示效果的话,我们只需要在样式表中进行相应的修改即可,特别的灵活方便。说到CSS不得不说CSS选择器,根据视频讲解,大致有三种:类选择器,ID选择器和HTML标签选择器。
类选择器和ID选择器的定义如下图所示:
推荐阅读
-
同一个表单,根据单击的按钮跳转到不同的页面_html/css_WEB-ITnose
-
使用css3背景渐变中的透明度来设置不同颜色的背景渐变_html/css_WEB-ITnose
-
css水平居中那点事_html/css_WEB-ITnose
-
请问下,webapp里面长按页面弹出来的菜单可以隐藏或者更改么_html/css_WEB-ITnose
-
网页总是有上边距,且JS脚本只能用于IE_html/css_WEB-ITnose
-
请问如何实现table的外框和内框线的粗度不同??_html/css_WEB-ITnose
-
浏览器地址栏网址始终只显示主域名问题_html/css_WEB-ITnose
-
求高手,模仿百度页面,页面缩小之后为什么排版都变了,应该怎样布局才不会乱!_html/css_WEB-ITnose
-
使用checkbox实现纯CSS下拉框_html/css_WEB-ITnose
-
30 套精美免费的 bootstrap 模板_html/css_WEB-ITnose