Ⅰ web前端,visual studio code,框架代码写完怎么用
肯定写在网页的 body 标签内啊,然后自己在 添加对应的div 标签 设置 css 样式
Ⅱ 简单CSS样式表的写法
<html>
<head>
<styletype="text/css">
a.top:link{font-family:宋体}/*链接字体*/
a.top:link{font-weight:normal;}/*设置链接文字中的字符粗细*/
a.top:link{font-size:12}/*设置链接文字的大小*/
a.top:link{text-decoration:none;}/*设置链接文字没有下划线*/
a.top:hover{text-decoration:underline;}/*鼠标放在链接上时有下划线*/
a.top:link{color:#000000}/*设置链接文字的颜色*/
a.top:visited{color:#000000}/*访问过的链接*/
a.top:hover{color:#B50000}/*鼠标放在链接上字体的颜色*/
a.tj:link{font-family:宋体}
a.tj:link{font-weight:normal;}
a.tj:link{font-size:12}
a.tj:link{text-decoration:none;}
a.tj:hover{text-decoration:none;}
a.tj:link{color:#000000}
a.tj:visited{color:#0000ff}
a.tj:hover{background:#FFFFCC}
h1{font-size:12px}
h1{font-family:"宋体"}
h1{font-weight:normal;}
h1{color:#000000}
h2{font-size:14px}
h2{font-family:"宋体"}
h2{font-weight:normal;}
h2{color:#000000}
h3{font-size:24px}
h3{font-weight:1;}
h3{color:#000000}
body{
margin-top:1px;/*上边距*/
margin-bottom:1px;/*下边距*/
}
</style>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"></head>
<body>
<p>.</p>
<p><b><ahref="default.asp"target="_blank"class="top">电脑对怀孕其实没啥影响</a></b></p>
<p><b><ahref="default.asp"target="_blank"class="tj">电脑对怀孕其实没啥影响</a></b></p>
<h1>电脑对怀孕其实没啥影响</h1>
<h2>电脑对怀孕其实没啥影响</h2>
<h3>电脑对怀孕其实没啥影响</h3>
</body>
</html>
Ⅲ 在html中怎样使用css样式
在html网页中引入引入css主要有以下四种方式:
(1)行内式
<p style=”color:red”>网页中css的导入方式</p>
(2)嵌入式
<style type=”text/css”>
P{ color:red }
</style>
嵌入式一般写在head中,对于单个页面来说,这种方式很方便。
(3)导入式
<!-- 导入外部样式:在内部样式表的<style></style>标记之间导入一个外部样式表,导入时用@import。 -->
<style type="text/css">
@import "jisuan.css";
</style>
(4)链接式
<link href="jisuan.css" rel=”stylesheet” type=”text/css” />
导入式和链接式差不多,都是从外部引入css文件。但是链接式对于客户端用户浏览网站时,效果会好些。
Ⅳ 怎样写CSS样式代码
CSS的定义由三个部分构成:选择符(selector),属性(properties)和属性的取值(value)。
CSS语法:
selector {property: value}
选择符 {属性:值}
选择符有多种:类型选择符、通配选择符、属性选择符等。
类型选择符:一般是你要定义样式的HTML标记,例如BODY、P、TABLE……,你可以通过此方法定义它的属性和值,属性和值要用冒号隔开。
例子:body {color: black},此例的效果是使页面中的文字为黑色。
如果需要对一个选择符指定多个属性时,我们使用分号将所有的属性和值分开。
例子:p {text-align: center; color: red} (段落居中排列;并且段落中的文字为红色)
这里只是最基本的写法,建议你去找教程学习,比如w3cschool里的CSS教程。
在此推荐经典教程《精通CSS》。
参考资料里有一些稍微详细的内容,建议你看一看。
Ⅳ Web前端面试指导(五十):CSS样式书写有哪些
一、CSS书写顺序
1.位置属性(position, top, right,z-index, display, float等)
2.大小(width, height, padding,margin)
3.文字系列(font, line-height,letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
二、CSS书写规范
1.使用CSS缩写属性
CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。
2.去掉小数点前的“0”
3.简写命名
很多用户都喜欢简写类名,但前提是要让人看懂你的命名才能简写哦!
4.16进制颜色代码缩写
有些颜色代码是可以缩写的,我们就尽量缩写吧,提高用户体验为主。
5连字符CSS选择器命名规范
1)长名称或词组可以使用中横线来为选择器命名。
2)不建议使用“_”下划线来命名CSS选择器,为什么呢?
输入的时候少按一个shift键;浏览器兼容问题(比如使用_tips的选择器命名,在IE6是无效的)能良好区分JavaScript变量命名(JS变量命名是用“_”)
6.不要随意使用id
id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。
7.为选择器添加状态前缀
有时候可以给选择器添加一个表示状态的前缀,让语义更明了,比如下图是添加了“.is-”前缀。
三、CSS命名规范
常用的CSS命名规则
头:header
内容:content/Container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:right
滚动:scroll
内容:content
标签:tags
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guide
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner
ID的命名-页面结构
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
ID的命名-导航
导航:nav
主导航:mainnav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary
ID的命名-功能
标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:register
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:right
四、注释规范
/* Header */
内容区
/* End Header */
五、注意事项
1.一律小写;
2.尽量用英文;
3.尽量不缩写,除非一看就明白的单词。
六、CSS样式表文件命名
主要的 master.css
模块 mole.css
基本共用 base.css
布局、版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
Ⅵ web前端,css样式
-webkit-box、-moz-box、-o-box、-ms-box、box这些都是指同一个属性即box,前面带有-号的是分别针对不同的浏览器的,其中
-webkit- 针对Chrome和Safari浏览器
-moz- 针对FireFox浏览器
-o- 针对Opera浏览器
-ms- 针对IE浏览器
也就是说凡是带有这样的前缀的都是这些浏览器的私有属性,只有各自的浏览器内部才有效。之所以这样,是因为有些css属性是带有实验性质的(尤其是css3),各主流浏览器尚未对它完全支持,这样就会使用私有属性来进行试验,而其他浏览器则会自动忽略该属性。因此,网页为了兼容各种不同的浏览器,就会把所有的私有属性都放上去,也包括不带前缀的标准属性。而浏览器的版本众多,很可能低版本的浏览器对某个属性处于试验性质,而高版本则已经完全支持了(也就是说可以不用前缀了),比如box属性就是如此,因此你把其他带有前缀的属性去掉不影响效果。但是,既然是网页,就不会是只有你一个人看的,要是其他用户用的是低版本的浏览器呢?所以,从兼容性角度出发,你最好不要删掉这些属性,除非你能保证其他用户用的浏览器与你的完全一样。
Ⅶ css样式怎么写
css样式是HTML的一个补充,简单的css使用样式如下:
<html>
<body>
<divid=div></div>
</body>
<styletype="text/css">
width:300px;//设置div的宽度300像素
height:500px;//设置div高度500像素
background-color:red;//设置div的背景颜色为红色
</style>
</html>
css代码位于style之间,详细的css代码解释见代码注释。
Ⅷ 在jsp页面定义CSS样式怎么写
1、打开WebContent文件。
Ⅸ 怎么给html标签写css样式
1、直接使用行内样式,即在html标签上使用style
<divstyle="width:100px;height:100px;background:red;">div内容</div>
2、先定义css样式,再给html的class属性赋值
<style>
.content{
width:100px;
height:100px;
background:red;
}
</style>
<divclass="content">
div测试内容
</div>
总结:两种方式效果是一致的,只是第二种方式可进行重用,只要html元素class属性相同即可
Ⅹ HTML网页怎么使用CSS样式
在制作一个网页的时候,Css样式的添加一共有四种方式,一起来看看这四种方式:
一、使用STYLE属性: 将STYLE属性直接加在个别的元件标签里。
<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}
例如:
<TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%>
这种用法的优点 是可灵巧应用样式于各标签中,但是缺点则是没有整篇文件的‘统一性’。
二、使用STYLE标签: 将样式规则写在<STYLE>...</STYLE>标签之中。
通常是将整个的 <STYLE>...</STYLE>结构写在网页的<HEAD> </HEAD>部份之中。这种用法的优点就是在于整篇文件的统一性,只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。
三、使用 LINK标签: 将样式规则写在.css的样式档案中,再以<LINK>标签引入。
假设我们把样式规则存成一个example.css的档案,我们只要在网页中加入
<LINK REL=STYLESHEET TYPE="text/css" HREF="example.css">
即可套用该样式档案中所制定好的样式了。 通常是将LINK标签写在网页的<head></head>部份之中。这种用法的优点就是在于可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。
四、使用@import引入: 跟LINK用法很像,但必放在<STYLE>...</STYLE> 中。
要注意的是,行末的分号是绝对不可少的!这种方式也可以把