教你用css3实现图片容器内等比缩放,教你用c3实现图片容器内等比缩放......
2023-03-16 301 CSS
Dreamweaver CS6如何应用：[28]CSS基本语法
来源：互联网
2023-03-16 19:17:28 153
CSS技术是Web网页技术的重要组成部分，页面通过CSS的修饰可以实现用户需要的显示效果。这项技术是目前最新的网页设计技术，大部分的网页设计都基本已经替换成这项技术，所以，这门技术的重要性也就显而易见。那么，下面我们一起来看看关于CSS的基本语法和操作吧。
工具/原料
- Dreamweaver CS6
方法/步骤
CSS的基本语法结构如下所示：
style type="text/css">
!--
.选择符{属性：值}
-->
/style>
CSS最大的一个特点。也是其优点，就是设置的可视化操作。在没有CSS以前，所有的效果都是需要用代码来完成的，对初学者来说很吃力，对设计者来说很浪费时间，而且在视觉效果的修正上很费力气，有了CSS，就可以通过可视化操作，实现所需要的效果。
那么，下面我们一起来看一下具体操作吧。
新建一个HTML空白页
在设计视图输入文本‘网页设计与制作’
![Dreamweaver CS6如何应用：[28]CSS基本语法](https://exp-picture.cdn.bcebos.com/04201aa355e983ae916a6d9968efe07815316910.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
在菜单栏中选择‘窗口’-----‘CSS样式’
![Dreamweaver CS6如何应用：[28]CSS基本语法](https://exp-picture.cdn.bcebos.com/562787cf02532f63a738d485699147e832e05c10.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
在软件的右侧面板上会出现‘css样式’面板，点击面板的图标，新建CSS规则，如下图所示：
![Dreamweaver CS6如何应用：[28]CSS基本语法](https://exp-picture.cdn.bcebos.com/3c42a5ea3e863048effee367c33104ebf7a75210.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
在弹出的‘新建CSS规则’对话框中选择‘选择器类型’，输入‘选择器名称’，选择‘ 规则定义’
![Dreamweaver CS6如何应用：[28]CSS基本语法](https://exp-picture.cdn.bcebos.com/f7e6410f822b74ee8a8f7fabda2c8cf1d9a74a10.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
在弹出的‘fffff的CSS规则定义’对话框可以选择你所需要的各种样式，包括类型、背景、区块、方框、边框、列表、定位、扩展、过度
![Dreamweaver CS6如何应用：[28]CSS基本语法](https://exp-picture.cdn.bcebos.com/506d92f1d8a72633d439f950c02c56ee7a7f4410.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
那我们在这个新建的CSS规则中设置字号为‘36’字体颜色为红色，加粗，点击‘确定’，详见下图：
![Dreamweaver CS6如何应用：[28]CSS基本语法](https://exp-picture.cdn.bcebos.com/27725684cde34b2cc9534fcc0d0e7c75e4f44310.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
选中文本，在‘属性’面板的类中，选择刚刚新建的CSS规则，
![Dreamweaver CS6如何应用：[28]CSS基本语法](https://exp-picture.cdn.bcebos.com/3b8fb4d7726b0ce2cf5a00bcef781423bfb9b610.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
设计视图中的文本效果就会变成新建的CSS样式效果
![Dreamweaver CS6如何应用：[28]CSS基本语法](https://exp-picture.cdn.bcebos.com/2083a5d6e1d06de82edcb296ca93cee8b104ac10.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： CSS
上一篇：css如何让图片适应div的大小 下一篇：div+css二级弹出菜单的制作
相关文章
- 详细阅读
-
怎么用div布局加css样式做网页详细阅读
怎么用div布局加css样式做网页,怎么做一个网页呢，静态页面的制作是很简单的，我们来看看怎么通过div布局 c样式来制作一个网页吧。......
2023-03-16 451 CSS
-
css基础教程：[1]为网页使用网络字体详细阅读
![css基础教程：[1]为网页使用网络字体](https://exp-picture.cdn.bcebos.com/cca2552c56ee7b7f34c65fc66ef4fcf5ef0d411f.jpg)
css基础教程：[1]为网页使用网络字体,本教程为大家介绍在网页上怎么使用网络字体。1，使用网络字体的好处是所有人看到的效果都是样的，效果统一，2，不依赖于用户电脑上是否安装了该字体。......
2023-03-16 296 CSS